'register' of 'useFormContext(...)' as it is null

Question

Столкнулась с проблемой при работе с react-hook-form. Когда я передаю методы через FormProvider и пытаюсь получить их в другом компоненте через useFormContext, появляется ошибка:

register = null

Хук useVerify.ts

import { yupResolver } from "@hookform/resolvers/yup";
import { verificationSchema } from "@/pages/Form/utils/schema";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { IVerificationData } from "@/types/FormData";
import { formService } from "@/services/form.service";
import { useErrorStore } from "@/store/ErrorStore";
export default function useVerify() {
 const methods = useForm({
 resolver: yupResolver(verificationSchema),
 defaultValues: {
 email: localStorage.getItem("registeredEmail") || "",
 otp: ["", "", "", "", "", ""],
 },
 });
 const setError = useErrorStore((state) => state.setError);
 const navigate = useNavigate();
 const onSubmit = async (data: IVerificationData) => {
 setError(false, "");
 const code = (data.otp || []).join("");
 console.debug("code:", code);
 try {
 const res = await formService.verifyUser(
 localStorage.getItem("registeredEmail") || "",
 code
 );
 console.log("🟢 Server response:", res);
 navigate("/login");
 localStorage.removeItem("registeredEmail");
 } catch (err: any) {
 const message =
 err.response?.data?.message ||
 err.response?.data?.error ||
 err.message ||
 "Unknown error";
 console.error(message);
 setError(true, message);
 }
 };
 return {
 ...methods,
 onSubmit,
 };
}

Компонент Verification.tsx

import { FormProvider } from "react-hook-form";
import { components } from "@/components/index";
import { useErrorStore } from "@/store/ErrorStore";
import useVerify from "@/hooks/useVerify";
export default function Verification() {
 const { isError } = useErrorStore((state) => state);
 const methods = useVerify();
 return (
 <FormProvider {...methods}>
 <form
 onSubmit={methods.handleSubmit(methods.onSubmit)}
 className="form__wrapper"
 >
 {isError && <components.Error />}
 <div className="form__container">
 <components.FormTitle
 title="Верифікація"
 underTitle="Введіть код, надісланий на вашу пошту"
 />
 <components.OtpInputs />
 <components.FormButton
 text="Підтвердити"
 isLoading={methods.formState.isSubmitting}
 />
 </div>
 </form>
 </FormProvider>
 );
}

Компонент OtpInputs.tsx

import { useState, useRef, useEffect } from "react";
import { useFormContext } from "react-hook-form";
export default function OtpInputs() {
 const { register, setValue } = useFormContext();
 const [otp, setOtp] = useState(["", "", "", "", "", ""]);
 const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
 useEffect(() => {
 inputsRef.current[0]?.focus();
 }, []);
 const handleChange = (index: number, value: string) => {
 const upper = value.slice(-1).toUpperCase();
 const newValues = [...otp];
 newValues[index] = upper;
 setOtp(newValues);
 setValue("otp", newValues);
 if (upper && index < otp.length - 1) {
 inputsRef.current[index + 1]?.focus();
 }
 };
 const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
 if (e.key === "Backspace" && !otp[index] && index > 0) {
 inputsRef.current[index - 1]?.focus();
 }
 };
 return (
 <section className="otp__section">
 {otp.map((val, index) => (
 <input
 key={index}
 type="text"
 inputMode="numeric"
 {...register?.(`otp.${index}`)}
 ref={(el: any) => (inputsRef.current[index] = el)}
 maxLength={1}
 className="otp__input"
 value={val}
 onChange={(e) => handleChange(index, e.target.value)}
 onKeyDown={(e) => handleKeyDown(index, e)}
 />
 ))}
 </section>
 );
}

• Дух сообщества: Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете.