How can we create a App header in reactNative - react-native

Question

I have a requirement of showing a app header with hamburger icon on left , and dropDown Selection in middle , and icon on the right side and below this , I'm showing a search bar . All these has to be added in the header part. below the searchView basically ,I have a list . How can we create the custom header like that?
samplecode:
const Drawer = createDrawerNavigator();
function MyDrawer({ navigation }) {
return (
<Drawer.Navigator
initialRouteName='HomeScreen'
screenOptions={{
headerTitle: (props) => <HeaderComp {...props} />,
headerStyle: {
backgroundColor: '#051E42', //Set Header color
height: 100,
elevation: 15,
shadowColor: '#000'
},
headerRight: () => (
<TouchableOpacity style={{marginRight:10}}>
<Image style={{ height: 30, width: 30, resizeMode: 'contain' }}
source={require('./assets/cart_img.png')}
// source={{ uri: 'asset:/images/cart_img.png' }}
/>
</TouchableOpacity>
),
headerTintColor: 'white'
}}
>
<Drawer.Screen name="HomeScreen"
component={HomeScreen}
/>
<Drawer.Screen name="Profile" component={ProfileScreen} />
<Drawer.Screen name="Settings" component={Settings} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
Header Component:
const HeaderComp = () => {
const [searchValue, setValue] = useState('');
return (
<View >
<Text style={style.headerTitle}>Custom Header</Text>
{/* <Text style={{top:20}}>dsfskdfsfdjhsfjhs</Text> */}
</View>
)
}
const style = StyleSheet.create({
headerTitle: {
fontWeight: 'bold',
alignItems: 'center',
color: 'white',
left: 60
}
})
export default HeaderComp;