In Typescript, how to assign a member of a discriminated type union to a generic type which expects that union

I'm using React-Typescript. I have a component which takes props like so:

type ComponentPropsType = {
    filterSet: FilterSet<Union>
}

type FilterSet<T> = {
    targetField: keyof T;
}

type Union = FirstType | SecondType;

type FirstType = {
    name: string;
    id: number;
    specificToFirst: string;
}

type SecondType = {
    name: string;
    id: number;
    specificToSecond: string;
}

Here is the relevant portion of Component:

export const Component = ({ filterSet }: ComponentPropsType) => {
    ...
}

When I attempt to invoke this component like so:

export const InvokerComponent = () => {
    const getFilterSet: FilterSet<FirstType> = () => 
        {targetField: "specificToFirst"}

    const filterSet: FilterSet<FirstType> = getFilterSet();

    return (
        <Component filterSet={filterSet} />  // TS ERROR HERE
    )
}

Typescript tells me:

Type FilterSet<FirstType> is not assignable to type FilterSet<Union> 
Type Union is not assignable to type FirstType
Type SecondType is missing the following properties from type FirstType: specificToFirst

My goal is to allow my component to accept a generic filterSet because I would like to restrict a field of filterSet to keyof the type passed in as the template. That's not displayed in my example above, but I don't think it's important to the problem at hand.

Once we make it into Component, I don't really care whether FirstType or SecondType was passed in to generate the filterSet. I want to restrict filterSet to FilterSet<Union> because I want the Union types well defined. It's important to the definition of the filterSet, but not really the functionality of the component.

I hope I've given enough information to help solve this issue. To restate the question:

In Typescript, how do I assign a member of a discriminated type union to a generic type which expects that union.

The issue is that your union is not being distributed in FilterSet, which is why FilterSet<Union is evaluated as:

{
    targetField: "name" | "id";
}

What you actually need is something in the following format:

{
    targetField: "name";
} | {
    targetField: "id";
}

The reason why the fields that are specific for the FirstType and SecondType is a known issue with the keyof operator (probably there is a GitHub issue, but I couldn't find one).

The desired type can be achieved by referring to distributive conditional types docs:

type FilterSet<T> = T extends T
  ? {
      targetField: keyof T;
    }
  : never;

Testing:

// type Result = {
//   targetField: keyof FirstType;
// } | {
//   targetField: keyof SecondType;
// }
type Result = FilterSet<Union>

This is exactly what we need:

const getFilterSet = () => ({} as any);

export const InvokerComponent = () => {
  // The following funcntion simply returns a an object of type FilterSet<FirstType>
  const filterSet: FilterSet<FirstType> = getFilterSet();

  return (
    <Component filterSet={filterSet} /> // no error
  );
};

playground