error TS2322: Type 'FC<{}>' is not assignable to type 'ReactNode'

Question

Does anyone know what this is?

Test suite failed to run

error TS2322: Type 'FC<{}>' is not assignable to type 'ReactNode'.

Did you mean to call this expression?

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

type Props = {
  makeLogin: React.FC
}

const Router: React.FC<Props> = ({ makeLogin }: Props) => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='login' element={makeLogin} />
      </Routes>
    </BrowserRouter>
  )
}

export default Router

....................

Answer 1

The type React.FC is a function, that returns a ReactElement. That's why TS is telling you, "Did you mean to call this expression?".

However, notice that when I prompt autocomplete, I can see the type of element in the tooltip:

The type is React.ReactNode, which we can then use:

type Props = {
    makeLogin: React.ReactNode;
};

Playground

Answer 2

change the Props type to:

type Props = {
  makeLogin: ReactNode;
};