A componenet VerifiedComp renders children if the email is verified(a prop from redux). If the email is not verified than it displays a button. The problem that I am having is that typescript is asking for children in the Parent Component.

Here is the CreatePage Component which is the parent component.

type StateTypes = {
  history: { push: (link: string) => {} };
};

const mapStateToProps = ({ history }: StateTypes) => ({
  history,
});

const connector = connect(mapStateToProps, { startCreateMovie });
type PropsFromRedux = ConnectedProps<typeof connector>;

export const CreatePage = ({ history, startCreateMovie }: PropsFromRedux) => {
  return (
    <VerifiedComp>
      <CreateForm ... />
    </VerifiedComp>
  );
};

And here is the VerifiedComp.

type PropTypes = {
  children: React.ReactNode
};

type StateTypes = {
  auth: { user: { emailVerified: boolean }, providerData: {email: string} };
}

const mapStateToProps = (state: StateTypes, props: PropTypes) => ({
  email: state.auth.providerData.email,
  children: props.children,
  emailVerified: state.auth.user.emailVerified
});

const connector = connect(mapStateToProps);
type PropsFromRedux = ConnectedProps<typeof connector>;

const VerifiedComp: React.FC<PropsFromRedux> = (props: PropsFromRedux) => {
  return props.emailVerified ? (
    <React.Fragment>{props.children}</React.Fragment>
  ) : (
    <Box>.....</Box>
  )

Here is the complete problem

Type '{ children: Element; }' is missing the following properties from type '{ email: string; emailVerified: boolean; }': email, emailVerified  TS2739

    19 | export const CreatePage = ({ history, startCreateMovie }: PropsFromRedux) => {
    20 |   return (
  > 21 |     <VerifiedComp>
       |      ^
    22 |       <MovieForm