再現コードは最小限にシンプルにしたので、意味自体はありません。

interface TextProps { data: { text: string }; }
interface ObjProps { data: object; }

const Para: React.FC<TextProps> = ({ data }) => <p>{data.text}</p>;
const Json: React.FC<ObjProps> = ({ data }) => <pre>{JSON.stringify(data)}</pre>;

const make = <T extends { data: {} }>(Elem: React.FC<T>, data: T['data']) => <Elem data={data} />;

export const res1 = make<ParaProps>(Para, { text: 'hoge' });
export const res2 = make<ObjProps>(Json, { foo: 'bar' });

上のコードはざっと通したい内容です。似たようなPropsを持つ(上の例ではdata)、複数のコンポーネントがあり、それを作成するmakeという関数があるという状態です。

このmakeのタグの部分で「型 '{ data: T["data"]; }' を型 'T' に割り当てることはできません。ts(2322)」というエラーが出てくるのですが、解消できるような型をanyを使わずに書くことができません。

通るような書き方、またはそもそもこのようなことができないのかを教えてください。

補足ですが、説明のために make とした部分は

const opt = (Elem) => ({ data, ...props }) => data ? <Elem data={data} {...props} /> : null;
export const OptPara = opt(Para);
export const OptJson = opt(Json);

という感じのことがやりたいのですが、不必要に型が複雑になり(しかも通っていない)ので、上のように書いた感じです。こちらの方が答えやすいとかあれば、こちらに答えていただいても構いません。