"Type '{ children: Element[]; pictureUrl: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'

Question

I'm having issues with Typescript and the following message :

{ children: Element[]; pictureUrl: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'

Property 'pictureUrl' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'

I really don't see what Did I do wrong, does someone see the problem ?

This is my App component :

import React from 'react';
import { Root, Routes, addPrefetchExcludes } from 'react-static';
import { Link, Router } from '@reach/router';
import FancyDiv from 'components/FancyDiv';
import Dynamic from 'containers/Dynamic';
import './app.css';
import NavDomicile from './components/NavDomicile';

// Any routes that start with 'dynamic' will be treated as non-static routes
addPrefetchExcludes([ 'dynamic' ]);

function App() {
 return (
  <Root>
   <NavDomicile pictureUrl="./assets/logo-lavigo-domicile.png">
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/blog">Blog</Link>
    <Link to="/dynamic">Dynamic</Link>
   </NavDomicile>
   <div className="content">
    <FancyDiv>
     <React.Suspense fallback={<em>Loading...</em>}>
      <Router>
       <Dynamic path="dynamic" />
       <Routes path="*" />
      </Router>
     </React.Suspense>
    </FancyDiv>
   </div>
  </Root>
 );
}

export default App;

And My Nav Component : 

<!-- begin snippet: js hide: false console: true babel: false -->

import React, { ReactNode } from 'react';

interface INavProps {
 pictureUrl?: string;
 children?: ReactNode;
}

const NavDomicile: React.FC = ({ children, pictureUrl }: INavProps) => {
 return (
  <nav>
   <div>
    <img src={pictureUrl} />
   </div>
   <div>{children}</div>
  </nav>
 );
};
export default NavDomicile;

Answer 1

You should be supplying the interface to the type generics of React.FC

const NavDomicile: React.FC<INavProps> = ({ children, pictureUrl }) => {


}