How do I pass props to bottomTabStack component nested within a screenStack component

I need Tab1 and Tab2 to accept the params defined TabParamList so I can properly render these components with the neccesary data. How would I create the interface Tab1Props and Tab2Props?

import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";import { NavigatorScreenParams } from "@react-navigation/native";import { createStackNavigator } from "@react-navigation/stack";export type TabParamList = {  Tab1: { id: number };  Tab2: { id: number };};const Tab = createMaterialBottomTabNavigator();interface Tab1Props {}function Tab1({ navigation, route }: Tab1Props) {  const { id } = route.params;  return <>{id}</>;}interface Tab2Props {}function Tab2({ navigation, route }: Tab2Props) {  const { id } = route.params;  return <>{id}</>;}export function TabNavigator() {  return (<Tab.Navigator><Tab.Screen        name="Tab1"        component={Tab1}        options={{          tabBarLabel: "Tab1",          tabBarIcon: ({ color }) => <SvgComponent object="Tab1" />,        }}      /><Tab.Screen        name="Tab2"        component={Tab2}        options={{          tabBarLabel: "Tab2",          tabBarIcon: ({ color }) => <SvgComponent object="Tab2" />,        }}      /></Tab.Navigator>  );}export type RootStackParamList = {  TabNavigator: NavigatorScreenParams<TabParamList>;};const Stack = createStackNavigator<RootStackParamList>();export default function AppStack() {  return (<Stack.Navigator><Stack.Screen name="TabNavigator" component={TabNavigator} options={{ headerShown: false }} /></Stack.Navigator>  );}