react-hook-form resolver type error using Yup

I'm creating an auth form and I'm referencing the react-hook-form docs on how to use yup to validate my inputs. As far as I can tell, everything is pretty much identical to the implementation provided in the docs. However, I'm getting the error on the useForm resolver (show below). Any idea where I'm going wrong?

• "react-hook-form": "^7.15.2"
• "yup": "^0.32.9"
• "@hookform/resolvers": "^2.8.1"

error

code

interface IFormInputs {
  email: string;
  password: string;
  passwordConfirm: string;
}

const schema = yup.object().shape({
  email: yup.string().required(),
  password: yup.string().required(),
  passwordConfirm: yup.string().required(),
});

const SignUp = (): JSX.Element => {
  const {
    control,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm<IFormInputs>({ resolver: yupResolver(schema) });

  const onSubmit: SubmitHandler<IFormInputs> = () => {
    const values = getValues();
    console.log('values', values);
  };

  return (
    <div>
      <StyledPaper>
        <StyledTypography>Sign Up</StyledTypography>
        <form onSubmit={handleSubmit(onSubmit)}>
          <Controller
            name="email"
            rules={{ required: 'this field is required' }}
            defaultValue=""
            control={control}
            render={({ field }) => (
              <TextField
                fullWidth
                label="Email"
                variant="filled"
                value={field.value}
                error={!!errors.email}
                helperText="Provide an email"
                {...field}
              />
            )}
          />
          <StyledButton type="submit">Submit</StyledButton>
        </form>
      </StyledPaper>
      <div>
        <StyledTypography>Already have an account? Log in.</StyledTypography>
      </div>
    </div>
  );
};

export default SignUp;