Реакция useState не обновляется после установки значения из Props при повторном рендеринге.

Question

Я новичок в реагировании и использую хуки

Чего я хочу добиться - после нажатия кнопки «Отправить», получить необходимые ожидаемые значения, а затем все поля будут сброшены , устанавливая состояния в новый объект.

Мне удалось получить необходимые значения, и я ожидаю, что установка значений состояния в новый объект по умолчанию сбросит значения текстовых полей, но, похоже, мне это не удалось.

Будет ли кто-то пролить свет на мне, почему такое поведение происходит?

Кстати: с использованием текстовых полей Material-UI

установка доступна по адресу: https://github.com/blackmo18/react-usestate-error.git

вот мой структура компонента:

<Register/>
    |
    | --> <StudentDetails/>
    |       |
    |       |
    |       | --> <PersonDetails/>
    |       |
    | - - - x --> <GuardianDetails/>
            |       |
            |       | --> <PersonDetails/>
            |       | --> <PersonDetails/>
            |
            | --> <ButtonSubmit/>

Псевдокод для каждого компонента:

Классы данных

Person {
    firstName
    lastName
    middleName
    .....
}
Guardian {
    father : Person
    mother: Person
}

BaseStudent {
    id: number
    person: Person
}

Student: BaseStudent {
    guardian: Guardian
}

Компонент регистра

    const [studentDetails, setStudentDetails] = useState(new Student())
    const [baseStudent, setBaseStudent] = useState(new BaseStudnet())
    const [guardian, setGuardian] = useState(new Guardian())

    const handleSubmit= (student: BaseStudent) => {
        setBaseStudent(student)
        setStudentDetails(Object.assign(studentDetails, baseStudent))
        // -- call api
        ....
        setBaseStudent(new BaseStudent())
        setGuardian(new Guardian())
    }

    const handleGuardian = (guardian) => {
        setGuardian(guardian)
        setStudentDetails(Object.assign(studentDetails, guardian)}

    }
    return (
      <StudentDetails
         onSubmit = {handleSubmit}
       >
        <GuardianDetails
           onChange = {handleGuardian}
        />

      </StudentDetails>
    )

Компонент PersonDetails

    const {person, onChange} = props
    const [person, setPerson] = useState(person? person : new Person())

    const handleFirstName = (e) => {
        setPerson(Object.assign(person, {firstName: event.target.value}))

        handleChange()
    }
    .................

    const handleChange = () => {
        if (onChange) {
            onChange(person)
        }
    }


    return (
        <div>
            <TextField 
                label = 'firstName'
                deafultValue = {person.firstName || ''}
                onChange = {e => {handleFirstName(e)}}

            />
            ........
        </div>
    )

Студенческий компонент

    const {onSubmit, value} = props
    const [student, setStudent] = usetState(value ? value : new BaseStudent())

    const getPerson = (person) => {
        setStudent(Object.assign(student, {person: person})
    }

    const handleChangeId = (e) => {
        setStudent(Object.assign(student, {id : e.event.target.value})
    }

    const handleSubmit = () => {
        if (onSubmit) {
           onSubmit(studentDetails)
        }
    }

    return (
         <TextField
            label = 'id'
            onChange = {e => {handleId(e)}}
        />
        <Person
           person = {student.person}
           onChange = {getPerson}
         />
        <Button onClick = {handleSubmit}>Submit</Button>
    )

Компонент Guardian

    const {value, onChange} = props
    const [guardian, setGuardian] = useState(value ? value : new Guardian());
    const [mother, setMother] = useState(new PersonState(new Person()));
    const [father, setFather] = useState(new PersonState(new Person()));

    const handleMother = (personMother) {
        setMother(personMother)
        setGuardian(Object.assign(guardian {mother: mother})
        handleChange({mother: mother})
    }
    ....
    const hanldeChange = (parent) => {
     setGuardian(Object.assign(guardian, parent))
     if (onChange) {
        onChange(guardian)
     }
    }

    return (
        <div>
            <PersonDetails
                person = {mother}
                onChange = {handleMother}
            />
            <PersonDetails
             ...........
            />
        </div>
    )