onChangeHandler :: how to manipulate the same input form

I'm implementing a "duplicate English word form" with React, but I don't know how to handle wordList containing multiple objects in the onChangeInputHandler variable.

When WordList is clicked with onClickCardAddHandler, the object inputData is meant to be added, and I want to adjust the input form separately from onChange using the index received from the onChange of the AddWordForm.jsx component.

Here's my code:

// AddWords.jsx(Parent component)

export default function AddWords() {
  const [wordList, setWordList] = useState([
    {
      spelling: "wordlist",
      meaning: "",
      category: "",
    },
  ]);
 

  const { spelling, meaning, category } = wordList;

  const inputData = {
    spelling: "",
    meaning: "",
    category: "",
  };

  const onChangeInputHandler = (e, index) => {
    const { value, name } = e.target;
    setWordList({
      ...wordList,
      [name]: value,
    });
  };

  const onClickCardAddHandler = () => {
    let WordInputs = [...wordList];
    let nextWordInputs = inputData;
    WordInputs.push(nextWordInputs);
    setWordList(WordInputs);
  };

  return (
    <Container>
      <AddWordsForm
        inputs={inputs}
        wordList={wordList}
        setWordList={setWordList}
        onChangeInputHandler={onChangeInputHandler}
      />
      <CardAddContainer onClick={onClickCardAddHandler}>
        <AddIcon /> add Card
      </CardAddContainer>
    </Container>
  );
}

//AddWordsForm.jsx 

import React, { useState } from "react";
import Input from "@mui/material/Input";
import styled from "styled-components";
import NativeSelect from "@mui/material/NativeSelect";
export default function AddWordsForm({
  wordList,
  onChangeInputHandler,
}) {
  const { spelling, meaning, category } = wordList;
  const categoryList = ["n", "v", "adj", "adv", "phr", "prep"];

  return (
    <>
      {wordList &&
        wordList.map((item, index) => (
          <CardContainer key={index}>
            <div>
              <div>
                <label>단어</label>
                <Input
                  name="spelling"
                  value={spelling}
                  onChange={(e) => onChangeInputHandler(e, index)}
                />
              </div>
              <div>
                <label>뜻</label>
                <Input
                  name="meaning"
                  value={meaning}
                  onChange={(e) => onChangeInputHandler(e, index)}
                />
              </div>
              <div>
                <label>품사</label>
                <NativeSelect
                  name="category"
                  value={category}
                  onChange={(e) => onChangeInputHandler(e, index)}
                >
                  {categoryList.map((category, index) => (
                    <option key={index} value={category}>
                      {category}
                    </option>
                  ))}
                </NativeSelect>
              </div>
            </div>
          </CardContainer>
        ))}
    </>
  );
}
const CardContainer = styled.div`
  background-color: lightgray;
  padding: 2vh;
  margin: 2vh;
  width: 35vh;
  border-radius: 1.5vh;
`;