I want to make abstraction out of Stack.Screen component in react navigation but i can't get the types work properly

I have this list of screens in an array

const screens: [NEED_TO_PROVIDE_CORRECT TYPE] = [  {    name: 'Home',    component: HomeScreen,    // so that i can get intellisense and autocompletion here for Stack.Screen props    // something like    // options: {} etc  },  {    name: 'Profile',    component: ProfileScreen,  },  {    name: 'Settings',    component: SettingsScreen,  },];

I want to achieve something like this where I can just spread the screen where it is the props with proper types

function App() {  return (<NavigationContainer><Stack.Navigator>        {screens.map(screen => (<Stack.Screen {...screen} />        ))}</Stack.Navigator></NavigationContainer>  );}

I have checked this https://reactnavigation.org/docs/typescript/ but I still couldn't find a way to achieve my requirement above.

i have tried this, but still doesn't work as i expected.

type StackParamList =  {    Home: undefined;    Profile: undeifned;    Settings: undefined;}type ScreenProps = RouteConfig<  StackParamList,  keyof StackParamList,  NavigationState<StackParamList>,  {},  EventMapBase>;const screens: RootScreenProps = [{name: "[STILL_DIDN'T_GET_THE_TYPE CORRECT_AND_NO_AUTO_COMPLETION]"}];