كيف يمكننى تمرير props داخل ال stack navigator ؟

السلام عليكم اريد انا اقوم بعمل dark and light mode وتواجهنى هذه المشكلة 

هذه هى الاسكرين الاولى 

function MenuScreen({navigation, darkModeValue, onDarkModeValue}) {
  return (
    <SafeAreaView style={styles.con}>
      <ScrollView>
        <Switch
          style={{position: 'absolute'}}
          value={darkModeValue}
          onValueChange={onDarkModeValue}
        />

هذا الملف الرئيسى للتطبيق 

const App = () => {
  const [dark, setDark] = useState(true);

  return (
    <PaperProvider theme={dark ? paperDarkTheme : paperDefaultTheme}>
      <NavigationContainer theme={dark ? DarkTheme : DefaultTheme}>
        <MainStack />
      </NavigationContainer>
    </PaperProvider>
  );
};

هنا اريد ان ارسل ال props 

function MainStack() {
  return (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen
        name="MenuScreen"
        component={MenuScreen}
        initialParams={{onDarkModeValue: () => setDark(true)}}
      />
      <Stack.Screen name="OmJoinScreen" component={OmJoinScreen} />
    </Stack.Navigator>
  );
}

لكن هذه الطريقة لا تعمل .. ما المشكلة وكيف حلها ؟ وهل هناك طريقة افضل ؟