Type 'Element | undefined' is not assignable to type 'FC | undefined'

In this MainHeader component:

<MainHeader
  LeftButton={
    previous ? (
      <BackButton
        onPress={() => {
          navigation.goBack;
        }}
      />
    ) : (
      undefined
    )
  }
  ...
/>

BackButton is a JSX element passed down through the LeftButton prop to MainHeader and is explicitly typed as const BackButton: React.FC<BackButtonProps>, so then I would expect the LeftButton prop to be typed as follows:

interface MainHeaderProps {
  LeftButton: React.FC<any> | undefined;
  ...
}

But I get this error when trying to assign BackButton | undefined to the LeftButton prop: Type 'Element | undefined' is not assignable to type 'FC<any> | undefined'. ...so I change my type to

interface MainHeaderProps {
  LeftButton: JSX.Element | undefined;
  ...
}

Error goes away. But now I get an error when I try to use <LeftButton /> in MainHeader: JSX element type 'LeftButton' does not have any construct or call signatures. So after doing some reading I'm even more confused about what type I should be using... I try many different types from @types/react like ComponentType to try and define LeftButton by its constructor, but TypeScript enforces that LeftButton be typed as JSX.Element, so I'm not sure how to best resolve this.