If I have the following:

interface TestProps { test: string }
const TestComponent = (props: TestProps) => <>{props.test}</>;

interface OtherProps { test2: number }
const OtherComponent = (props: OtherProps) => <>{props.test2}</>;

How can I ensure that a variable is a JSX element derived from TestComponent, but not OtherComponent?

E.g. the following should work fine:

const testElement: ReactElement<TestProps> = <TestComponent test="hi"/>; // OK

But this should not work:

const testElement: ReactElement<TestProps> = <OtherComponent test2={6}/>; // Warning

Help greatly appreciated