React navigation 5 custom header component

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!

Akbar