Не могу сам разобраться в ошибке TS

Не успел разобраться как тут вставлять код. А изображения вставляются только одно, или я не понял.

Помогите пожалуйста, чего от меня хочет TS? Может то что я указал ранее не верно

<LoginForm login={Login} error={error})>

app.tsx

    import React, { useState } from "react";
    import { LoginForm } from "./components/LoginForm";
    
    type User = {
      name: string;
      password: number;
    };
    
    function App() {
      const adminUser: User = {
        name: "admin",
        password: 123,
      };
    
      const [user, setUser] = useState({ name: "" });
      const [error, setError] = useState<string>("");
    
      const Login = (inputValue: { name: string; password: number }) => {
        console.log(inputValue);
    
        if (
          inputValue.name === adminUser.name &&
          inputValue.password === adminUser.password
        ) {
          console.log("Logged in");
          setUser({
            name: inputValue.name,
          });
        } else {
          console.log("Fill in the fields!");
          setError("Fill in the fields!");
        }
      };
    
      const Logout = () => {
        console.log("Logout");
        setUser({
          name: "",
        });
      };
    
      return (
        <div className="App">
          {user.name !== "" ? (
            <div className="welcome">
              <h2>
                Welcome, <span>{user.name}</span>
              </h2>
              <button onClick={Logout}>Logout</button>
            </div>
          ) : (
            <LoginForm login={Login} error={error} />
          )}
        </div>
      );
    }
    
    export default App;

component

    import React, { FormEvent, useState } from "react";
    
    interface ILoginForm {
      login: string;
      error: string;
    }
    
    export const LoginForm: React.FC<ILoginForm> = ({ login, error }) => {
      const [inputValue, setInputValue] = useState({ name: "", password: "" });
    
      const submitHandler = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
    
        login(inputValue);
      };
    
      return (
        <form onSubmit={submitHandler}>
          <div className="form-inner">
            <h2>Wellcome to Chatty!</h2>
            <h2>Please, autorize yourself</h2>
            {error !== "" ? <div className="error">{error}</div> : ""}
            <div className="form-group">
              <label htmlFor="name">User name</label>
              <input
                type="text"
                name="name"
                id="name"
                placeholder="Input user name"
                onChange={(e) =>
                  setInputValue({ ...inputValue, name: e.target.value })
                }
                value={inputValue.name}
              />
            </div>
            <div className="form-group">
              <label htmlFor="password">Password</label>
              <input
                type="password"
                name="password"
                id="password"
                placeholder="Input password"
                onChange={(e) =>
                  setInputValue({ ...inputValue, password: e.target.value })
                }
                value={inputValue.password}
              />
            </div>
            <input type="submit" value="Log In" />
          </div>
        </form>
      );
    };

<LoginForm login={Login} error={error})>

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

Автор решения: Spatz

Исправьте описание интерфейса:

interface ILoginForm {
  login: (inputValue: { name: string, password: string }) => void
  error: string
}
→ Ссылка