我尝试将 useState 函数传递给另一个 prop，但出现以下错误： Uncaught RangeError：超出最大调用堆栈大小

我将 useState 函数作为子组件中 buttonClick 的 handleevent 进行添加，我假设该错误意味着它在循环中被调用？有人能帮我理解这里的问题吗？代码如下：

    function App() {
        const[personListe, setPersonListe] = useState([
          {
            firstName:'Test',
            lastName:'testing',
            getFullName:function()
            {
                return `${this.firstName} ${this.lastName}`
            },
            age:28
            },
        ]);
  
      return (<>
          <Header />
          <h1>Welcome to my react page!</h1>
          <Inputfields personListe={personListe} addPerson={setPersonListe} />
          <PersonList personListe={personListe}/>
        </>
      );
    }

子组件（Inputfields.js）：

export default function Inputfields({personListe}, {addPerson})
{
    function addPerson()
    {
        let firstName = document.getElementById("firstNameID");
        let lastName = document.getElementById("lastNameID");
        let age = document.getElementById("ageID");
        if(firstName.value.length < 1 || lastName.value.length < 1 || age.value.length < 1)
        {
            alert("Please fill out all the fields!");
        }
        else
        {
            addPerson(
                {
                    firstName:firstName.value,
                    lastName:lastName.value,
                    age:age.value
                }
            );
            firstName.value = "";
            lastName.value = "";
            age.value = "";

        }
    }
    return(
        <>
            <Input id="firstNameID" placeholder="First name" /> <br />
            <Input id="lastNameID" placeholder="Last name" /> <br />
            <Input id="ageID" placeholder="Age" type="number" /> <br />
            <Button variant="contained" sx={{marginTop:2}} onClick={addPerson}>Add person</Button>
        </>
    );
}