Error while trying to use it with yup and yup resolver

[copy-ninja1]

/node_modules/remix-hook-form/dist/index.js:129
useSubmit
^^^^^^^^^
SyntaxError: Named export 'useSubmit' not found. The requested module 'react-router' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-router';

at ModuleJob._instantiate (node:internal/modules/esm/module_job:131:21)
at ModuleJob.run (node:internal/modules/esm/module_job:213:5)
at ModuleLoader.import (node:internal/modules/esm/loader:316:24)

Example

import * as yup from "yup";

export const SignUpSchema = yup.object().shape({
  firstName: yup.string().required("First Name is required"),
  lastName: yup.string().required("Last Name is required"),
  email: yup.string().email().required("Email Address is required"),
  phone: yup.string().required("Phone Number is required"),
  password: yup.string().required("Password is required"),
  confirmPassword: yup
    .string()
    .required("Confirm your Password")
    .oneOf([yup.ref("password")], "Passwords must match"),
  address1: yup.string().required("Address 1  is required"),
  address2: yup.string().optional(),
  gender: yup.string().required("gender is required"),
  timeZone: yup.string().optional(),
  city: yup.string().required("City is required"),
  state: yup.string().required("State is required"),
  postCode: yup.string().required("Post Code is required"),
});

export type SignUpSchema = yup.InferType<typeof SignUpSchema>;

  const {
    handleSubmit,
    formState: { errors },
    register,
  } = useRemixForm<SignUpSchema>({
    mode: "onSubmit",
    resolver: yupResolver(SignUpSchema),
  });