I'm forcing myself to learn Typescript (urrggg). I usually can determine the type to set by examining the return values. However for the following circumstance, its not working.

```
type SomeReactAProps = {
  Type1: ReactElement;
  Type2: Function;
};

const SomeReactA = ({ Type1, Type2 }: SomeReactAProps) => {
  return (
    <>
      {Type1}
      <Type2 className="wow" />
    </>
  );
};
type SomeReactBProps = {
  className: string;
};
const SomeReactB = (props: SomeReactBProps) => (<div {..props}>Hello World</div>);

const TestingReact = () => {
  return (
    <>
      <SomeReactA Type1={<>Hi</>} Type2={SomeReactB} />
    </>
  );
};

```

The code works. Fitting Typescript to it is the problem.

Type1 works as expected with ReactElement. Kind of surprised that JSX.Element didn't have some of the properties that ReactElement had.

Type2 technically works but Typescript complains Function is too generic. I agree but all my other solutions failed. What type should I set Type2 to?

---

Figured it out. See answer below.