문제를 해결하는 데 도움이 필요합니다.

string는 {username: string; password: string;} 유형의 인덱스로 사용할 수 없다는 내 코드의 오류를 이해하고 있습니다. 그러나 지금 이것을 어떻게 고칠 수 있습니까? 변경 시 여러 입력 요소 값을 처리하고 싶습니다. 여기 내 코드에서 handleChange function 이 작업을 수행하는 방법은 무엇입니까? !! 경고 나는 typescript에서 처음입니다.
다음은 Login.tsx에 대한 내 코드입니다.

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;

InputField.tsx 코드

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;