How to expand search bar after pressing search icon in the header(appbar) | React native

As I'm new to react native i dont know how to implement the searchbar in header. Please take a look at the image provided below.

the search icon in the appbar when clicked should expand on click.

expanded search bar.

I have created an Search icon by using vector icons and I just wanna know how to expand search bar icon when someone presses on it..

<Appbar.Action icon={() => }onPress={_handleSearch} /> - this is the search icon.

//HomeScreen.tsximport React,{ useEffect }  from 'react';import { Alert, BackHandler, StatusBar, Text, View } from 'react-native';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { theme } from '../components/theme';import { SafeAreaProvider} from 'react-native-safe-area-context';import {Appbar} from 'react-native-paper';import SearchComponent from '../components/SearchBar';import AntDesign from 'react-native-vector-icons/AntDesign';function Notification() { return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Notification!</Text></View>  );}function Account(props: any) { return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Notification!</Text></View> );}const Tab = createBottomTabNavigator();const HomeScreen = () => {const _handleSearch = () => {<SearchComponent />;};return (<SafeAreaProvider><Appbar.Header><Appbar.Content title="header"  /><Appbar.Action icon={() => <AntDesign name="search1" color="white" size={25}/>}    onPress={_handleSearch} /></Appbar.Header><Tab.Navigator    screenOptions={({ route }) => ({    tabBarHideOnKeyboard: true,    tabBarStyle: {height: 60},    headerLeft: ()=> null,    tabBarIcon: ({ focused, color}) => {      let iconName = '';      if (route.name === 'Home') {        iconName = focused          ? 'ios-compass'          : 'ios-compass-outline';      } else if (route.name === 'Notification') {        iconName = focused ? 'file-tray' : 'file-tray-outline';      }      else if (route.name === 'Account') {        iconName = focused ? 'md-person-circle' : 'md-person-circle-outline';      }      // You can return any component that you like here!      return <Ionicons name={iconName} size={30} color={color} />;    },    tabBarActiveTintColor: theme.colors.primary,    tabBarInactiveTintColor: 'gray',  })}><Tab.Screen name="Home" options={{headerShown:false}} component={UserListView} /><Tab.Screen name="Notification" options={{headerShown:false}} component=   {Notification}/><Tab.Screen name="Account" options={{headerShown:false}} component={Account} /></Tab.Navigator></SafeAreaProvider> );};export default HomeScreen;//SearchBar.tsximport * as React from 'react';import { StyleSheet, View } from 'react-native';import { Searchbar } from 'react-native-paper';import AntDesign from 'react-native-vector-icons/AntDesign';const SearchComponent = () => { const [searchQuery, setSearchQuery] = React.useState(''); const onChangeSearch = (query: React.SetStateAction<string>) => setSearchQuery(query); return (<View style={styles.container}><Searchbar      style={[styles.Searchbar, styles.elevation]}      placeholder="Search"      icon={() => <AntDesign name="search1" color="white" size={25}/>}      onChangeText={onChangeSearch}      value={searchQuery} children={undefined} onPressIn={undefined} onPressOut=       {undefined} textAlign={undefined} autoComplete={undefined}    /></View>     );    }; const styles = StyleSheet.create({      Searchbar: {      marginTop:10,      width: '100%',      marginVertical: 10,      boxShadow: '0px 3px 26px rgba(67, 67, 67, 0.15)',      backgroundColor:'#FFFF',      borderRadius:10,      height:60,     },    container: {      flex:1,      alignItems:'center',      justifyContent:'center',      marginRight:12,     },    elevation: {     elevation: 20,     },   });export default SearchComponent;