How to implicitly infer specific type

I've been trying to implicitly infer the specific type of screens in the code down below, without hard coding the type in there.

The expected Result:

{    element: React.FC    name: 'Explore' | 'Hates' | 'Messages' | 'Profile'}[]

The actual Result:

{    element: React.FC    name: string}[]

these are the two ways I tried it and both didn't work:

interface IScreen<T> {    element: React.FC;    name: T}function test<T>(screen: React.FC, name: T): IScreen<T> {    const obj = {        element: screen,        name: name    };    return obj};const screens: IScreen[] = [    test(ExploreScreen, 'Explore'),    test(HatesScreen, 'Hates'),    test(MessagesScreen,'Messages'),    test(ProfileScreen,'Profile'),];

interface IScreen<T> {    element: React.FC;    name: T}const screens: IScreen[] = [    { element: ExploreScreen, name: 'Explore' },    { element: HatesScreen, name: 'Hates' },    { element: MessagesScreen, name: 'Messages' },    { element: ProfileScreen, name: 'Profile' },];