Need help to fix a problem

import * as React from "react"; import { useState } from "react"; import InputField from "./InputField"; interface User { username: string; password: string; } const Login: React.FC = () => { // account state const [account, setAccount] = useState<User>({ username: "", password: "", }); function handleChange(evt: React.FormEvent<HTMLInputElement>) { // extract name and value property of current input element const { name, value } = evt.currentTarget; const accountCopy = { ...account }; // make copy of current account; accountCopy[name] = value; // update value from input element value setAccount(accountCopy); } function handleSubmit(evt: React.FormEvent<HTMLFormElement>) { evt.preventDefault(); alert(`Hi ${account.username} with pass ${account.password}`); } return ( <div className="col-8 m-auto mt-4 py-2"> <h1>Login</h1> <form onSubmit={handleSubmit}> <InputField label="Username" name="username" type="text" value={account.username} onChange={handleChange} /> <InputField label="Password" name="password" type="password" value={account.password} onChange={handleChange} /> <button type="submit" className="btn btn-primary"> Login </button> </form> </div> ); }; export default Login; 

import * as React from "react"; interface Props { name: string; label: string; value: string; type: string; onChange: (evt: React.FormEvent<HTMLInputElement>) => void; } const InputField: React.FC<Props> = ({ name, label, value, type, onChange, }) => { return ( <div className="form-group"> <label htmlFor="name">{label}</label> <input name={name} id={name} type={type} className="form-control" value={value} onChange={(evt) => onChange(evt)} required /> </div> ); }; export default InputField;