How to open keyboard after clicking on search icon? (react-native)

I created an animated search bar using TextInput. I simply want to know how to open keyboard when I click on search icon and close when I click on cancel icon. I tried some of points using google help but it's not worth. Please suggest some help.

export default function SearchBar() {
  const animation = new Animated.Value(50);
  const { width } = Dimensions.get('window');
  const keyboard = useKeyboard();

  function onSearch() {
    Animated.spring(animation, {
      toValue: width * 1,
      useNativeDriver: false,
    }).start();
  }
  function onSearchClose() {
    Animated.spring(animation, {
      toValue: width * 0.11,
      useNativeDriver: false,
    }).start();
    Keyboard.dismiss();
  }
  return (
    <SafeAreaView
      style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
      <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
        <View style={{ marginRight: 0, justifyContent: 'center' }}>
          <TouchableWithoutFeedback>
            <Image source={require('./logo.png')} style={{ width: 30, height: 30 }} />
          </TouchableWithoutFeedback>
        </View>
        <View style={{ marginRight: 0 }}>
          <Container style={{ width: animation }}>
            <Input placeholder={'search'} style={{ marginLeft: 50, fontSize: 18 }} />
            <BoxButtonClose onPress={onSearchClose}>
              <CloseIcon />
            </BoxButtonClose>
            <BoxButtonSearch onPress={onSearch}>
              <SearchIcon />
            </BoxButtonSearch>
          </Container>
        </View>
      </View>
    </SafeAreaView>
  );
}

export default function SearchBar() {
  const animation = new Animated.Value(50);
  const { width } = Dimensions.get('window');
  const keyboard = useKeyboard();
  const inputRef = useRef();

  function onSearch() {
    Animated.spring(animation, {
      toValue: width * 1,
      useNativeDriver: false,
    }).start();
    inputRef.current.focus(); //Keep this for open keyboard onClick
  }

  function onSearchClose() {
    Animated.spring(animation, {
      toValue: width * 0.11,
      useNativeDriver: false,
    }).start();
    Keyboard.dismiss(); //Keep this for close keyboard onClick
    // inputRef.current?.blur();
    setText(''); //Keep this for clear text on close
  }

  const [text, setText] = useState('');

  return (
    <SafeAreaView
      style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
      <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
        <View style={{ marginRight: 5, justifyContent: 'center' }}>
          <TouchableWithoutFeedback>
            <Image
              source={require('./logo.png')}
              style={{ width: 30, height: 30 }}
            />
          </TouchableWithoutFeedback>
        </View>
        <View style={{ marginRight: 0 }}>
          <Container style={{ width: animation }}>
            <Input
              ref={inputRef}
              placeholder={'search'}
              value={text}
              onChangeText={(value) => setText(value)}
              style={{ marginLeft: 50, fontSize: 18 }}
            />
            <BoxButtonClose onPress={onSearchClose}>
              <CloseIcon />
            </BoxButtonClose>
            <BoxButtonSearch onPress={onSearch}>
              <SearchIcon />
            </BoxButtonSearch>
          </Container>
        </View>
      </View>
    </SafeAreaView>
  );
}