I am getting this 'withNavigation can only be used on view hierarchy of a navigator' error when I'm trying to load a candlestick graph page

Navigation works fine on other pages but doesn't work on this page particularly. I have tried various solutions but nothing worked.

picture:

github : https://github.com/danklad/CandleStickReactNative

here's my navigation code..I removed all the imports to lessen the code size here..

import Home from "./Home/Home";
import CandlestickChart from "./CandleStickChart";
import Account from "./Account/Account";



const Tab = createMaterialBottomTabNavigator();


export default function MyTabs() {
  return (
      <NavigationContainer ref={navigationRef}>
          <Tab.Navigator
              screenOptions={({ route }) => ({
                  tabBarIcon: ({ focused, color}) => {
                      let iconName;

                  if (route.name === 'Home') {
                      iconName = focused
                          ? 'ios-information-circle'
                          : 'ios-information-circle-outline';
                  } else if (route.name === 'Settings') {
                      iconName = focused ? 'ios-list-box' : 'ios-list';
                  } else if (route.name === 'CandleStickChart'){
                    iconName = focused ? 'ios-list-box' : 'ios-list';
                  }

                  // You can return any component that you like here!
                  return <Ionicons icon={iconName} size={25} color={"red"}/>
              },
          })}
          

      >
          <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="Account" component={Account} />
          <Tab.Screen name="CandleStickChart" component={CandleStickChart} />
      </Tab.Navigator>
  </NavigationContainer>
  );
}

the CandleStickChart page doesn't load up and is showing the above mentioned error!

here's the CandleStickChart.tsx code!

const candles = data.slice(0, 100);
const bars = data.slice(0, 100);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
  },
});
const getDomain = (rows: Candle[]): [number, number] => {
  const values = rows.map(({ high, low }) => [high, low]).flat();
  return [Math.min(...values), Math.max(...values)];
};
const domain = getDomain(candles);
export default function CandleStickChart() {
  console.log("reached");
  const [x, y, state] = useValues(0, 0, State.UNDETERMINED);

  console.log(x,y,state);
  const gestureHandler = onGestureEvent({
    x,
    y,
    state,
  });
  const caliber = size / candles.length;
  const translateY = diffClamp(y, 0, size);
  const translateX = add(sub(x, modulo(x, caliber)), caliber / 2);
  const opacity = eq(state, State.ACTIVE);


  
  return (

    
    <View style={styles.container}>
       <ScrollView>
      <View>
        <Header />
        <Animated.View style={{ opacity }} pointerEvents="none">
          <Values {...{ candles, translateX, caliber }} />
        </Animated.View>
      </View>
      <PinchZoomView>  
      <View>
        <Chart {...{ candles, domain, bars }} />
      </View>
      </PinchZoomView>
      <Content />
      </ScrollView>
    </View>
  );
};

You are mixing react-navigation versions. This may cause unexpected errors.

From your package.json

"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/compat": "^5.3.20",
"@react-navigation/material-bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",

...

"react-navigation": "^4.4.4",
"react-navigation-hooks": "^1.1.0",
"react-navigation-shared-element": "^3.1.3",
"react-navigation-stack": "2.10.4",
"react-navigation-tabs": "^2.11.1",