why react native tab view is taking white space when sliding to next tab

Question

In react native tab view when I scroll to the bottom and slide to the next page when I am getting black space. Is there any way I can re-render the slide from top:

const renderTabs = () => {
  return (
    <>
      <TabView
        onIndexChange={index => setIndex(index)}
        navigationState={{index: tabIndex, routes}}
        renderScene={renderScene}
        renderTabBar={renderTabBar}
        initialLayout={{
          height: 0,
          width: Dimensions.get('window').width,
        }}
        // lazy
      />
    </>
  );
};

const renderTabBar = props => {
  const y = scrollY.interpolate({
    inputRange: [0, HeaderHeight],
    outputRange: [HeaderHeight, 0],
    extrapolateRight: 'clamp',
  });
  return (
    <Animated.View
      style={{
        top: 0,
        zIndex: 1,
        position: 'absolute',
        transform: [{translateY: y}],
        width: '100%',
      }}>
      <TabBar
        {...props}
        onTabPress={({route, preventDefault}) => {
          if (isListGliding.current) {
            preventDefault();
          }
        }}
        style={styles.tab}
        renderLabel={renderLabel}
        scrollEnabled={true}
        indicatorStyle={styles.indicator}
      />
    </Animated.View>
  );
};

The next slide should not be taking white space - when I touch to screen and try to slide up then only it will become responsive