Unable to store data in useState - reactjs

Question

[Here is the view
So I have the following output.
I am unable to store the data from this form to the Array and an object.
Every time there is a change in children field there is another form that has to be stored.
I have to do this using and unique ID for each of them.
const CreateForm = () => {
const [isDisabled, setIsDisabled] = useState(false);
let [applicant, setApplicant] = useState([]);
const handleChildren = (e) => {
const udatedApplicant = { ...applicant };
udatedApplicant.childrens = e.target.value;
setApplicant({ ...udatedApplicant });
if (applicant.childrens!==0){
udatedApplicant.childrens= e.target.childrens=0;
}
};
const handleRadio = (e) => {
const udatedApplicant = { ...applicant };
udatedApplicant.maritalStatus = e.target.value;
setApplicant({ ...udatedApplicant });
};
// const finalForm = setApplicant(...applicant)
return (
<div>
<div>
<input name="firstName" placeholder="firstName" />
<input name="lastName" placeholder="lastName" />
<input type="email" name="Email" placeholder="Email" />
<div>
<label>
<input type="radio" name="Gender" value="Male" />
Male
</label>
I am able to handle all the onChanges fields but unable to store this using map in the useState applicant.
I tried it using the index, but after I store the first applicant, when I change the field married or children, I got a blank page.
Can someone help me handle this? I passed 2 hours on this and I'm still not able to store the data.
Im kinda new in React.
Any small tip would be appreciated.