How to customize the @react-navigation/material-top-tabs

I’m using @react-navigation/material-top-tabs and I need to customize the default style. expected image

code ,

<Tab.Navigator
        style={{ marginTop: 100 }}
        tabBarOptions={{
          activeTintColor: '#FFFFFF',
          labelStyle: {
            textTransform: 'none',
          },
          inactiveTintColor: '#FFFFFF',
          indicatorStyle: {
            height: 30,
            top: '10%',
            bottom: '10%',
            width: '45%',
            left: '2.5%',
            borderRadius: 10,
            backgroundColor: '#0099CC',
          },
          style: {
            alignSelf: 'center',
            width: '70%',
            borderRadius: 10,
            borderColor: 'blue',
            backgroundColor: '#434343',
            elevation: 5, // shadow on Android
            shadowOpacity: 0.1, // shadow on iOS,
            shadowRadius: 4, // shadow blur on iOS
          },
          tabStyle: {
            borderRadius: 10,
          },
        }}
        swipeEnabled={true}>

How to convert this to react navigation 6 and how to add this as custom component.
Note : I was using react navigation 6