I have a message component that looks like this:

type MessageProps<
    ParamList extends Record,
    K extends keyof ParamList
> = {
    navTo: K;
    title: string;
    desc: string;
    cta: string;
} & (undefined extends ParamList[K]
    ? { params?: ParamList[K] }
    : { params: ParamList[K] });

export function Message, K extends keyof ParamList = keyof ParamList>(
    props: MessageProps
) {
    const { navTo, params, title, desc, cta } = props;

    const navigation = useNavigation>();

    const handlePress = () => {
        if (params === undefined) {
            // @ts-ignore
            navigation.replace(navTo);
        } else {
            // @ts-ignore
            navigation.replace(navTo, params);
        }
    };

    return (
        
            }
        />
    );
}

and is will be used like so:

   navTo="MessageCustomer2"
   title="No more loyalty card mess for you!"
   desc="All your cards will be stored in the same place"
   cta="Next"
/>


    navTo="Email"
    params={{ title: "", desc: "" }}
    title="Fast stamping"
    desc="Stamps are quickly added when you show your unique code"
    cta="Next"
/>

Ideally i would like ts to infer the type of the params prop based on the navTo prop value. instead of having to supply the key in the generic type. So instead of this: i would like just this:

But i cant get it to work with ts, the params type is a union of all possible ParamList[K] or it doesnt provide any type information at all. I am out of my league here and would love some help or even to know if it is possible at all.

Next to this i keep getting errors on the navigation.replace(navTo); or navigation.replace(navTo, params);

The errors on the navigation.replace look like:

Argument of type '[K]' is not assignable to parameter of type 'K extends unknown ? undefined extends ParamList[K] ? [screen: K, params?: ParamList[K] | undefined] : [screen: K, params: ParamList[K]] : never'.

Some context, they are being used in a native stack navigator like so:

     (
        
            navTo="MessageCustomer2"
            title="Title a"
            desc="Desc a"
            cta="Next"
        />
    )} />
     (
        
            navTo="Email"
            params={{ title: "", desc: "" }}
            title="Title b"
            desc="Desc b"
            cta="Next"
        />
    )} />
    

which has its type like so:

export type AppOnboardingNavigationParamList = {
    MessageCustomer1: undefined;
    MessageCustomer2: undefined;
    Email: { title: string, desc: string };
}

this is a simplified version of the actual navigator with many more screens.