React navigation 5 custom header component - react-native

Question

I am trying to make custom header in React Navigation v5 which I've been using since v3 but somehow it doesn't work in v5. my header is successfuly shown with its animation on scroll down but i cannot click anything inside the header and also i cannot inspect my header.
const Stack = createStackNavigator();
class HomeStack extends Component {
render() {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{
header: (props) => <HomeHeader {...props} />,
}}
/>
</Stack.Navigator>
);
}
}
and here is my header component
/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Animated} from 'react-native';
class HomeHeader extends Component {
handleClickSearch = () => {
this.props.navigation.navigate('Search');
};
render() {
const {
scene: {
route: {params},
},
} = this.props;
if (!(params && params.opacity && params.bgColor)) return null;
// console.log(params.bgColor)
return (
<Animated.View
style={{
...styles.container,
backgroundColor: params.bgColor,
// elevation: params.elevation
}}>
<Animated.View
style={{
...styles.searchContainer,
opacity: params.opacity,
}}>
<View
style={{
flex: 1,
height: '100%',
backgroundColor: '#fff',
width: '100%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#666666',
}}>
<TouchableOpacity
activeOpacity={1}
style={styles.search}
onPress={() => this.handleClickSearch()}>
<Text style={styles.searchText}>
Search batik, sepatu kulit...
</Text>
</TouchableOpacity>
</View>
</Animated.View>
</Animated.View>
);
}
}
const styles = StyleSheet.create({
container: {
width: '100%',
height: 60,
paddingTop: 10,
paddingBottom: 5,
paddingHorizontal: 10,
position: 'absolute',
top: 0,
left: 0,
right: 0,
justifyContent: 'center',
alignItems: 'center',
},
searchContainer: {
width: '90%',
height: 38,
justifyContent: 'center',
},
search: {
paddingHorizontal: 10,
paddingVertical: 5,
height: '100%',
justifyContent: 'center',
},
searchText: {
color: '#666666',
fontSize: 12,
letterSpacing: 0.5,
lineHeight: 14,
},
});
export default HomeHeader;
how can i make fully custom header component in react navigation 5? Thanks!