React: enable signup button after filling out a form in React - reactjs

Question

I wanna activate the button after I check all the inputs from the user by the function ValidateForm(). If all of fields are correct due to validateForm(), then I can see the green button activate. The problem: how can I check ALL of the fields after finishing filling out, and not only when I fill out the first field.
const validateForm = (values) => {
const errors = {};
errors.firstname = values.firstname.length >= 3;
errors.lastname = values.lastname.length >= 3;
errors.email = values.email.length >= 3;
return errors;
}
const SignUp = () => {
const eintraege = { firstname: '', lastname: '', email: '' };
const [formValues , setFormValues] = useState(eintraege);
const [errors, setErrors] = useState({});
const [buttonDisabled, setButtonDisabled] = useState(true);
const formChangeHandler = (event) => {
const { name, value } = event.target;
const nextValues = {...formValues, [name]: value };
setErrors(validateForm(nextValues));
};
const handleSubmit = (event) => {
event.preventDefault();
setButtonDisabled(true);
};
const btnChanged = () => {
return (Object.keys(errors).length === 0) ?
setButtonDisabled(true) :
setButtonDisabled(false) ;
};
return (
<FormBox onSubmit={handleSubmit}>
<ProfileImage />
<InputWrapper gridPosition="firstname-input">
<Input
type="text"
name='firstname'
value={formValues.firstname}
placeholder='Vorname'
hasError={errors.firstname === false}
onChangeHandler={formChangeHandler}
/>
<Error errors={errors} name="firstname" />
</InputWrapper>
<Button className="btn" disabled={buttonDisabled}/>
</FormBox>
);
}