Типизация props в Input

Не можу задати тип rest, завжди якась ошибка. Вот код

import { InputProps } from "./interfaces";
import React from "react";

const Input: FC<InputProps> = ({ name, type = "text",label, ...rest }) => {
  return (
    <div className="relative z-0 w-full mb-8">
      <input
        id={name}
        type={type}
        placeholder=" "
        className="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-black border-gray-200"
        {...rest}
      />
      <label
        htmlFor={name}
        className="absolute duration-300 top-3 -z-1 origin-0 text-gray-500"
      >
        {label}
      </label>
    </div>
  );
};

export default Input;

Код файла interfaces:

export type InputProps = {
    label: string,
    name: string,
    type: string,
    rest?: any
}

Код файла App:

import Input from "./component/Input/input";
import React from "react";

const App: ReactNode = () => {
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");

  return (
    <div className="w-full h-screen flex items-center justify-center m-auto">
      <div className="max-w-md w-full m-auto mt-48 p-5 bg-white border rounded">
        <h2 className="font-medium text-xl">Login</h2>
        <form className="pt-5">
          <Input
            label="Email"
            name="email"
            type="email"
            value={email}
            onChange={(v) => setEmail(v.target.value)}
          />
          <Input
            label="Password"
            name="password"
            type="password"
            value={password}
            onChange={(v) => setPassword(v.target.value)}
          />
          <button
            type="submit"
            className="bg-blue-500 px-4 py-2 rounded-full text-white hover:bg-blue-600 active:bg-blue-700"
          >
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

export default App;

Ошибки:

Type '{ label: string; name: string; type: string; value: string; onChange: (v: any) => void; }' is not assignable to type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.
  Property 'value' does not exist on type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.

Ответы (0 шт):