Yup Validation causing errors - reactjs

Question

I'm trying to validate my forms on React using yup and useForm, I've followed every step of the tutorial but I am still receiving errors. I am receiving 'TypeError: Cannot read property 'firstName' of undefined'. This is odd because I have already named it in the input value. How can I fix this?
P.s I have tried using {...register} and ref={register} don't seem to matter.
import React from 'react'
import { useForm } from "react-hook-form";
import { yupResolver } from "#hookform/resolvers/yup";
import * as yup from "yup";
const schema = yup.object().shape({
firstName: yup.string().required("First Name should be required please"),
lastName: yup.string().required(),
email: yup.string().email().required(),
});
const Submission = () => {
const { register, handleSubmit, errors } = useForm({
resolver: yupResolver(schema),
});
const submitForm = (data) => {
console.log(data);
};
return (
<div className="Form">
<div className="title">Sign Up</div>
<div className="inputs">
<form onSubmit={handleSubmit(submitForm)}>
<input
type="text"
name="firstName"
{...register('firstName')}
placeholder="First Name..."
/>
<p> {errors.firstName?.message} </p>
<input
type="text"
name="lastName"
placeholder="Last Name..."
ref={register}
/>
<p> {errors.lastName?.message} </p>
<input
type="text"
name="email"
placeholder="Email..."
ref={register}
/>
<p> {errors.email?.message} </p>
<input type="submit" id="submit" />
</form>
</div>
</div>
);
}
export default Submission;
The exact error I am recieving looks like this:

Answer 1

Turns out I'm still using the outdated version of the library.
From this,
<input type="text"name="email"placeholder="Email..."ref={register}/>
const { register, handleSubmit, errors } = useForm({
resolver: yupResolver(schema),
});
To this
{...register("email", { required: "Email is Required"})};
const { register,handleSubmit, formState: { errors },} = useForm();