Estoy usando useState con una devolución de llamada:

 interface Props { label: string; key: string; } const [state, setState] = useState<Props[]>([]); setState((prev : Props[]) => [...prev, newThing])

me sale el error:

2349: This expression is not callable. Type 'Props' has no call signatures.

No estoy seguro de cómo definir una firma de llamada dentro de la interfaz/tipo de Props, ¿cuál es el mejor enfoque para resolver esto?

Editar:

Así es como lo estoy usando dentro de mi código:

Interfaz:

 interface TagProps { left: string; top: string; backgroundColor: string; rotation: number; label: string; key: string; }

Inicio.tsx

 const Home: FC<TagProps> = (setState, state: TagProps[]) => { const createTag = (e: any) => { const tagSpec = { left: e.clientX + "px", top: e.clientY + "px", backgroundColor: randomColour(colors), rotation: randomNumber(-20, 20), label: tech[randomNumber(0, tech.length - 1)], key() { return this.label + this.backgroundColor; }, position: "absolute", }; setState((prev: TagProps[]) => [...prev, tagSpec]); }; ... }

Aplicación.tsx

 function App() { const [tag, setTag] = useState<TagProps[]>([]); return ( <BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home setState={setTag} state={tag} />} /> <Route path="/blog" element={<Blog />} /> </Route> </Routes> </BrowserRouter> ); }