Typescript React - How does a parent component constrain the props types of child components

Question

This is parent component

class Form<T extends Record<string, any>> extends React.Component<{
  data: T;
  children: React.ReactElement<FormItem<{ keys: keyof T }>>;
}> {
  render() {
    return <div>{this.props.children}</div>;
  }
}

This is child component

class FormItem<T extends any> extends React.Component<T> {
  render() {
    return <div>{this.props.children}</div>;
  }
}

In use

class Demo extends React.Component {
  render() {
    return (
      <Form data={{ name: 'Jo', age: 24  }}>
        <FormItem keys="b"></FormItem> // keys should be 'name' or 'age'
      </Form>
    );
  }
}

Or, How do you design components to meet this requirement?