React TypeScript: (props: OwnProps) => Element' is not assignable to type 'FunctionComponent<{}>

Question

As a JSX element, all is good...

interface OwnProps {
  children: JSX.Element;
  location: Location;
}

export function Layout(props: OwnProps): JSX.Element {

When I change it to a functional component I get an error on Layout

interface OwnProps {
  children: JSX.Element;
  location: Location;
}

const Layout: React.FC = (props: OwnProps) => {

The Error is

Type '(props: OwnProps) => Element' is not assignable to type 'FunctionComponent<{}>'.
  Types of parameters 'props' and 'props' are incompatible.
    Property 'location' is missing in type '{ children?: ReactNode; }' but required in type 'OwnProps'.ts(2322)
layout.tsx(18, 3): 'location' is declared here.

Answer 1

React.FC is actually a generic type. You need to specify your prop type

const Layout: React.FC<OwnProps> = (props: OwnProps) => {}