Why state show undefined? - reactjs

Question

I am working on form validation and I make two arrays one for check value and the second was check validation but when the page refresh and render then in my console log show undefined in my name state. whether I give him to a true value in the state. Does anyone have any idea why is this?
var validation = [{
name: true,
company: true,
email: true,
phone: true,
message: true,
}]
const [isValidate, setisValidate] = React.useState({ ...validation })
const [error, seterror] = React.useState({
name: '',
company: '',
email: '',
phone: '',
message: '',
});
const isValidFun = (param) => {
let isTrue = true;
if((param === "name" || param === "all") && (!error.name || error.name.length < 5)) {
isValidate.name = false;
isTrue = false;
} else {
isValidate.name = true;
}
setisValidate({ ...isValidate })
return isTrue;
}
const handleChange = (e) => {
error[e.target.name] = e.target.value;
seterror({ ...error });
isValidFun(e.target.name);
};
console.log(isValidate.name)
const sentMail = () => {
let isValid = isValidFun("all");
if (isValid) {
alert('Form submitted')
}
};
return (
<Input
type="text"
name="name"
placeholder="Name"
value={error.name}
onChange={handleChange}
/>
{!isValidate.name && <p className="error">This field is required</p>}
);
};

Answer 1

Your validation object is an array. When you initialise the state, you use the spread operator on the array inside the object, so you end up with an object with key 0 and value of the object.
var validation = [{
name: true,
company: true,
email: true,
phone: true,
message: true,
}]
console.log({...validation}]
Instead, change the validation to an object and assign it to state.
var validation = {
name: true,
company: true,
email: true,
phone: true,
message: true,
}
const [isValidate, setisValidate] = React.useState(validation);

Answer 2

Should be the spreader. validation variable should be like this
var validation = {
name: true,
company: true,
email: true,
phone: true,
message: true,
}