如何在TypeScript中正确键入泛型React函数组件

import React, { ReactNode } from 'react';

interface Props<T> {
  data: T;
  children: (data: T) => ReactNode;
}

function GenericComponent<T>({ data, children }: Props<T>) {
  return <div>{children(data)}</div>;
}

interface UserData {
  name: string;
  age: number;
}

function App() {
  const userData: UserData = { name: 'John Doe', age: 25 };

  return (
    <GenericComponent<UserData> data={userData}>
      {data => (
        <div>
          <p>Name: {data.name}</p>
          <p>Age: {data.age}</p>
        </div>
      )}
    </GenericComponent>
  );
}