reactjs - ¿Por qué no puedo usar este componente con TypeScript?

Encontré una biblioteca react-debounce-input y la uso en mi aplicación sin problemas.

Pero desde que me pasé a TypeScript, estoy recibiendo un error al intentar usar esta biblioteca. Aquí está el ejemplo mínimo reproducible:

import { FunctionComponent } from 'react';
import { DebounceInput } from 'react-debounce-input';

type Props = {};

export const Foo: FunctionComponent<Props> = () => {
  return (
    <form>
      <DebounceInput />
    </form>
  );
};

El error que estoy recibiendo es:

TS2786: 'DebounceInput' cannot be used as a JSX component.
  Its instance type 'DebounceInput<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>' is not a valid JSX element.
    Type 'DebounceInput<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

¿Me estoy perdiendo de algo? Según los documentos, debería funcionar. Estoy usando la versión más reciente.

Respuesta #1

Sin problema con TypeScript:

import { FunctionComponent } from "react";
import { DebounceInput } from "react-debounce-input";
import { useState } from "react";

type Props = {};

export const Foo: FunctionComponent<Props> = () => {
  const [state, setState] = useState("");

  return (
    <form>
      <div>input: {state}</div>

      <DebounceInput
        minLength={5}
        debounceTimeout={500}
        onChange={(e) => setState(e.target.value)}
      />
    </form>
  );
};

Sandbox pruébalo

Nota al margen sobre el tipo de función de React, se puede escribir como:

const Foo: React.FC<Props> = () => { ... }

De esta manera no tienes que hacer import { FunctionComponent } from "react";