How to update initialParams in React Navigation?

I have an app with array getting from storage and passing it to screen

Here is a bare version. Here if getItem is late, after rendering the screen array updates automaticly

import React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage'

import Vocabulary from "./Screens/Vocabulary";

export default function App() {
  const [ vocabulary, setVocabulary] = React.useState([]);

  React.useEffect(() => {
    AsyncStorage.getItem('@vocabulary').then(value => setVocabulary(value !=null ? JSON.parse(value) : []) )
  }, []);
    
  return (
    <VocabularyWithEdit vocabulary={vocabulary} />
  );
}

Then I tried to use React Navigation and set array in initialParams

import React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import Vocabulary from "./Screens/Vocabulary"

export default function App() {
  const [ vocabulary, setVocabulary] = React.useState([]);

  React.useEffect(() => {
    AsyncStorage.getItem('@vocabulary').then(value => setVocabulary(value !=null ? JSON.parse(value) : []) )
  }, []);
  const Stack = createStackNavigator()
    
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Vocabulary" component={Vocabulary} initialParams={{ vocabulary: vocabulary, str: "hey" }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

But there array wasn't updated after rendering and set as [] or sometime i got undefinded

Please let me know how to fix it and make params update