How do I type check React Navigator's Stack Navigation routes when the Stack Screens/Stack Screen name are generated at runtime?

I am currently using React Navigation for an app, I am relatively new to TS so need some suggestions on how to do this.

My problem is that I am copying React Navigations suggested type checking for the navigator, but I am unsure how to add mappings for stack screens that are generated on the fly from an array of objects.

React Navigation documentation suggests that we do it this way...

type ShopParamsList = {  Shop: Array<NavigationItem>;}; const Stack = createStackNavigator<ShopParamsList>();

This is fine for my first stack screen which looks like this

<Stack.Screen       name='Shop'       component={CategoryPage}       ...       />

However, other screens are generated from an array of data and we are setting the name of the components from the data in the array, like this...

   {categoryNavigation.map((item: NavigationItem, key) => {          if (item.Data.Url !== null) {            return (<Stack.Screen                key={key}                name={item.Data.Url}   //here                }}                component={CategoryPage}                ...              />})

Therefore, I'm unsure how to type check the screens, since they are generated on the fly

   type ShopParamsList = {      Shop: Array<NavigationItem>;      //Other Screens: Other Screen Params   }; 

So how can I pass the correct mappings into this object type for these screens?Thanks!