React + Typescript Context Provider with children autocompletion

FlagContextProvider.tsx

import React, { ReactElement, ReactNode, useState } from 'react'

export interface IFlagContext {
  userEmail: string | null
  sendEmail: boolean
  changeUserEmail: (email: string) => void
}

const FlagContext = React.createContext<IFlagContext | null>(null)

interface IFlagContextChildren {
  children: (a: IFlagContext) => ReactNode
}

const FlagContextProvider = ({ children }: IFlagContextChildren): ReactElement<IFlagContextChildren> => {
  const [userEmail, changeUserEmail] = useState<string | null>(null)
  const flagContextHandler = {
    sendEmail: false,
    userEmail,
    changeUserEmail
  }
  return (
    <FlagContext.Provider value={flagContextHandler}>
      {children(flagContextHandler)}
    </FlagContext.Provider>
  )
}

const App: React.FunctionComponent = () => {
  return (
    <FlagContextProvider>
      {({ sendEmail }) => sendEmail && <div>hello</div>}
    </FlagContextProvider>
  )
}