реагировать на собственный текстовый ввод, изменять положение курсора при нажатии

Прямо сейчас в моем родном приложении для реагирования я не могу изменить промежуточное значение каждого ввода. Потому что каждый раз, когда я нажимаю на ввод текста, курсор находится в конце вставленной строки.

Например:

Значение: 123456 ----> Я хочу удалить/изменить только 23, но не могу, потому что курсор находится над последним значением.

я пытался использовать selectTextOnFocus, но он срабатывает только тогда, когда я нажимаю на другой текстовый ввод, и он не работает, если данные предварительно заполнены. Я пытаюсь объяснить лучше

на изображении внизу я перешел от первого текста Mobile Number ко второму id RICE.

На изображении ниже я ввел новые значения 12321, но если нажать второй раз на тот же ввод, текст не будет выделен. Я пытался нажать и остаться секунд на 10, но ничего.

Я использую xcode для сборки приложения.

это мой входной компонент

const InputField: React.FC<Props> = (
  {
    placeholder,
    iconLeft,
    iconRight,
    dateTimeIcon,
    iconBackground,
    type,
    id,
    style,
    name,
    value,
    keyboardType,
    iconRightFunction,
    maxLength = 100,
    inputBackground,
    onChangeText,
    onChange,
    editable,
    textAlign,
    setMarginBottom,
    onFocus,
    multiline,
    numberOfLines,
    label,
    error,
    errorLabel,
    containerHeight,
    onBlur,
  },
  ref,
) => {
  const [hidePassword, showOrHidePassword] = useState(true);

  const _handleShowPassword = () => {
    showOrHidePassword(!hidePassword);
  };

  const _handleOnChange = ({ nativeEvent }) => {
    onChange && onChange(name, nativeEvent.text);
  };

  const _handleOnBlur = () => {
    onBlur && onBlur(name, value);
  };
  const input = useRef(null);
  const showPassword = type === 'password' && !error && value.length !== 0;
  return (
    <>
      {label && (
        <StyledLabelContainer setMargin={setMarginBottom}>
          <StyledLabel error={error}>{label}</StyledLabel>
          {error && <StyledLabel error={error}>{errorLabel}</StyledLabel>}
        </StyledLabelContainer>
      )}

      <StyledContainer containerHeight={containerHeight} setMargin={setMarginBottom}>
        {iconLeft && <StyledIconLeft bgColor={iconBackground}>{iconLeft}</StyledIconLeft>}
        <TouchableOpacity
          activeOpacity={0}
          onPress={() => {
            console.log('inputcurrent', input, input.current);
            input.current.focus();
          }}
          style={{ flex: 1 }}
        >
          <View pointerEvents="none" style={{ flex: 1 }}>
            <StyledInput
              style={style}
              ref={input}
              textAlign={textAlign}
              maxLength={maxLength}
              editable
              selectTextOnFocus
              clearTextOnFocus={false}
              secureTextEntry={type === 'password' && hidePassword}
              placeholder={placeholder}
              type={type}
              autoCapitalize="none"
              onChangeText={onChangeText}
              onChange={_handleOnChange}
              value={value}
              id={id}
              name={name}
              bgColor={inputBackground}
              keyboardType={keyboardType}
              blurOnSubmit={true}
              onFocus={onFocus}
              returnKeyType={'done'}
              onBlur={_handleOnBlur}
              error={error}
              multiline={multiline}
              numberOfLines={numberOfLines}
            />
          </View>
        </TouchableOpacity>

Вопрос

Как я могу установить правильное положение курсора во время действия нажатия? Пример: 123456 ----> пользователь нажимает в середине строки, я ожидаю увидеть каретку между цифрами 3 и 4.

Мои попытки

Я читал о селекции, но мне не удалось ее реализовать, буду очень рад любым советам.

Спасибо за время.