Problem with using if statement in react-hook-form - reactjs

Question

Validation in react-hook-form using if, else statement return only when return value is true. But if the statement is false it returns nothing.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import "./styles.css";
const App = () => {
const {
register,
handleSubmit,
getValues,
formState: { isValid }
} = useForm({
mode: "onChange",
defaultValues: {
firstName: "",
lastName: ""
}
});
const onSubmit = () => {
if (isValid) {
console.log("valid");
} else {
console.log("invalid");
}
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label>First Name</label>
<input type="text" {...register("firstName", { required: true })} />
<label>Last Name</label>
<input type="text" {...register("lastName", { required: true })} />
<input type="submit" />
</form>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I don't know what's wrong. Can someone help please.
Here's the code from codesandbox

Answer 1

I don't think anything is wrong with the code. If you only enter the last name and hit submit, it highlights the first name box. And same for the opposite. If you only enter the first name and hit submit, it highlights the second box. This seems to me like a default behavior from the react hook form. Here you can see I added a useEffect to it to print out the validity. When the form is valid you can see it shows correctly.
This seems to be a feature from the react hook form to prevent submitting if it is not valid.
Edit: Look into their import { ErrorMessage } from "#hookform/error-message"; system they have in place. And Here is an updated code sandbox with error handling

Answer 2

Your form wont submit unless required fields are entered on inputs:
const onSubmit = () => {
if (!isValid) {
console.log("valid");
} else {
console.log("invalid");
}
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label>First Name</label>
<input type="text" {...register("firstName")} />
<label>Last Name</label>
<input type="text" {...register("lastName")} />
<input type="submit" />
</form>
);
};