React Native TextInput onFocus does not allow onPress of other child components

Nested TextInput component does not allow other components' onPress function to be called. Only when the TextInput is not focused, the onPress works fine.

React Native Version : 0.66.3

Here is my code

export const Component = (props): JSX.Element {  const { searchText, onChangeSearchText, onClearSearchText } = props  const [searchViewFocused, setSearchViewFocused] = useState<boolean>(false)  const searchIcon = searchViewFocused ? "searchActive" : "searchInactive"  const cancelIcon = searchViewFocused ? "cancelActive" : "cancelInactive"  return (<View style={styles.searchBoxContainer}><View style={[styles.searchBox, searchViewFocused && styles.searchBarActive]}><Icon styles={styles.searchIcon} icon={searchIcon} /><TextInput          style={styles.searchInput}          onChangeText={onChangeSearchText}          value={searchText}          onFocus={() => setSearchViewFocused(true)}          onBlur={() => setSearchViewFocused(false)}          autoCompleteType={"off"}          numberOfLines={1}        />        {searchText !== "" && (<Pressable style={styles.clearIcon} onPress={onClearSearchText}><Icon icon={cancelIcon} /></Pressable>        )}</View></View>  )})

Attached are the images of

Expected.

VS

The issue

When the cross icon is pressed on focused state, the textInput is unfocused rather What I am trying to achieve is that the search text gets cleared & the input remains focused.

Note: The onPress works perfectly fine when input is not focused

Any help is appreciated. Thanks!

PS: Tried TouchableOpacity & also I have tried wrapping the components inside a ScrollView to use keyboardShouldPersistTaps='handled' as mentioned in one of the SO answer but to no success.