How can I implement a clear button in a React Native TextInput that doesn't lose focus?

Trying to implement a TextInput clear button in react native loses focus to the text input without invoking the function in the first place

I have a Task to implement A text input that has a little clear button which sets the input field to "". it looks like this: input example

I implemented it as needed however when I click the X icon , responsible for clearing the input text while maintaining focus to allow the user to continue editing what happens is that It registers as a click outside the input field and it triggers on blur therefore not executing the clear function at all. here is my code:

import {
  View,
  TextInput,
  Pressable,
  Image,
  GestureResponderEvent,
  Text,
  ScrollView,
} from 'react-native';
import React, {Dispatch, SetStateAction, useRef, useState} from 'react';
import styles from './InputField.styles';
import {useTheme} from 'react-native-paper';
import assets from '@common/assets';
import {layouts} from '@common/constants';
type Props = {
  title?: string;
  icon?: string;
  placeholder?: string;
  isInvalid?: boolean;
  caption?: string;
  value: string;
  valueSetter: Dispatch<SetStateAction<string>>;
  disabled?: boolean;
  autoFill?: boolean;
};
export default function InputField({
  title,
  icon,
  placeholder,
  isInvalid,
  value,
  valueSetter,
  caption,
  disabled = false,
  autoFill = false,
}: Props) {
  const theme = useTheme();
  const [focused, setFocused] = useState(false);
  const inputRef = useRef<TextInput>(null);

  return (
    <View>
      <Pressable
        // onPress={() => inputRef.current?.focus()}
        style={styles(theme).mainContainer}>
        <Text style={styles(theme, focused, disabled).title}>{title}</Text>
        <View style={styles(theme, focused, disabled, isInvalid).contentStyle}>
          {icon && (
            <Image
              style={styles(theme).imgContainer}
              resizeMethod="resize"
              source={assets.PersonImage}
            />
          )}
          <TextInput
            editable={!disabled}
            selectionColor={theme.neutralGray1}
            value={value}
            onChangeText={valueSetter}
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            style={styles(theme, focused, disabled, isInvalid).inputField}
            placeholder={placeholder}
            ref={inputRef}
          />
          {focused && (
            <Pressable
              onPress={() => {
                valueSetter('');
              }}>
              <Image style={{...layouts.ms.lg}} source={assets.InputClear} />
            </Pressable>
          )}
        </View>
        {caption && (
          <Text
            style={
              isInvalid
                ? styles(theme, focused, disabled).invalidCaption
                : styles(theme, focused, disabled).caption
            }>
            {caption}
          </Text>
        )}
      </Pressable>
    </View>
  );
}

I found the issue and it has nothing to do with the code above. I render this component inside a ScrollView in another screen so I had to add the prop keyboardShouldPersistTaps="handled" to the parent scrollview so that it doesnt lose the focus of the child component