input state 여러개 동시에 관리하기

const [inputs, setInputs] = useState({
    id: '',
    pw: '',
  });

const { id, pw } = inputs; 
  // 구조분해할당
  // same with
  // const id = inputs.id;
  // const pw = inputs.pw;

const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value, name } = e.target;

    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value, // name 키를 가진 값을 value 로 설정
    });
  };

const handleSubmit = (e: React.SyntheticEvent) => {
    setInputs({
      id: '',
      pw: '',
    });
};

const handleEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSubmit(e);
    }
};


<TextField
    name='id'
    onChange={handleInput}
    onKeyUp={handleEnter}
    value={id}
/>
<TextField
    name='pw'
    onChange={handleInput}
    onKeyUp={handleEnter}
    value={pw}
    type='password'
/>
<CustomButton onClick={handleSubmi}>
    로그인하기
</CustomButton>