React children function - broken argument type inference

[JadowityHerbatnik]

Bug Report

Children function argument type is inferred incorrectly (always as any) when the following conditions are met:

• children prop is written using jsx "child indentation" syntax (as opposed to the regular prop={value} syntax)
• union type is used in the props of component invoking the children function

🔎 Search Terms

React children union prop function infer type any jsx indentation

🕗 Version & Regression Information

5.0.2

⏯ Playground Link

https://codesandbox.io/s/react-typescript-forked-nx818f?file=/src/App.tsx

💻 Code

export type Props =
  | { renderNumber?: false;
      children: (arg: string) => void;
    }
  | {
      renderNumber: true;
      children: (arg: number) => void;
    };

export const Foo = ({ children, renderNumber }: Props) => {
  return <>{!renderNumber ? children('foo') : children(123)}</>;
};

export const Test = () => {
  return (
    <>
      {/* broken - value is inferred as any */}
      <Foo>{(value) => {}}</Foo> 
      <Foo renderNumber>{(value) => {}}</Foo> 

      {/* type inferred correctly */}
      <Foo children={(value) => {}} /> 
      <Foo renderNumber children={(value) => {}} /> 
    </>
  );
};

🙁 Actual behavior

Passing children function using jsx indentation syntax results in a broken type inference

🙂 Expected behavior

Both syntaxes should work the same way