Clear Text on single tap

When I click on the cross icon first time, it lowers the keyboard and on the second tap, it clears the text in the search bar. I wanted to clear the text on the first tap I have tried other solutions as well but nothing worked. How can i clear the text on the first click?

    return (<View style={styles.FlatList_header}><View style={styles.header_style}><Input            autoFocus={true}            style={styles.textInputStyle}            onChangeText={text => this.search(text)}            value={this.state.text}          /><Icon            name="close"            style={styles.crossIcon}            onPress={() => {              this.search('');            }}          /></View></View>    );  };  render() {    const {data, onPress} = this.props;    return (<><SafeAreaView          style={{flex: 1, backgroundColor: customColor.defaultGreen}}><View style={styles.MainContainer}><FlatList              data={data}              renderItem={({item}) => (<View                  style={{                    flex: 1,                    borderWidth: 0.5,                    borderColor: customColor.textLightGrey,                  }}><Text                    style={styles.FlatList_Item}                    onPress={() => onPress(item)}>                    {item?.taskName}</Text></View>              )}              enableEmptySections={true}              ListHeaderComponent={this.Render_FlatList_Sticky_header}              keyExtractor={item => item.id}            /></View></SafeAreaView></>    );  }}