📝(react) fix RHF login example

This story was broken due to incorrect usage of FormProvider.

packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx

@@ -1,7 +1,7 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Meta } from "@storybook/react";
 import React from "react";
-import { useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import * as Yup from "yup";
 import { RhfInput } from ":/components/Forms/Input/stories-utils";
 import { Checkbox } from ":/components/Forms/Checkbox";
@@ -29,7 +29,7 @@ const loginSchema = Yup.object().shape({
 });
 
 export const Login = () => {
-  const { register, handleSubmit, formState } = useForm<LoginStoryFormValues>({
+  const methods = useForm<LoginStoryFormValues>({
     defaultValues: {
       email: "",
       password: "",
@@ -41,6 +41,7 @@ export const Login = () => {
   });
 
   return (
+    <FormProvider {...methods}>
       <form
         style={{
           display: "flex",
@@ -48,7 +49,7 @@ export const Login = () => {
           gap: "1rem",
           width: "300px",
         }}
-      onSubmit={handleSubmit(onSubmit)}
+        onSubmit={methods.handleSubmit(onSubmit)}
       >
         <h1
           className="fs-h3 fw-bold clr-greyscale-900"
@@ -59,26 +60,27 @@ export const Login = () => {
         <RhfInput
           label="Email"
           fullWidth={true}
-        state={getFieldState("email", formState)}
+          state={getFieldState("email", methods.formState)}
-        text={getFieldErrorMessage("email", formState)}
+          text={getFieldErrorMessage("email", methods.formState)}
-        {...register("email")}
+          {...methods.register("email")}
         />
         <RhfInput
           label="Password"
-        state={getFieldState("password", formState)}
+          state={getFieldState("password", methods.formState)}
           type="password"
           text={
-          getFieldErrorMessage("password", formState) || "Forgot your password?"
+            getFieldErrorMessage("password", methods.formState) ||
+            "Forgot your password?"
           }
           fullWidth={true}
-        {...register("password")}
+          {...methods.register("password")}
         />
         <div>
           <Checkbox
             label="Remember me"
-          state={getFieldState("rememberMe", formState)}
+            state={getFieldState("rememberMe", methods.formState)}
-          text={getFieldErrorMessage("rememberMe", formState)}
+            text={getFieldErrorMessage("rememberMe", methods.formState)}
-          {...register("rememberMe")}
+            {...methods.register("rememberMe")}
           />
         </div>
         <Button fullWidth={true}>Log in</Button>
@@ -89,5 +91,6 @@ export const Login = () => {
           </a>
         </div>
       </form>
+    </FormProvider>
   );
 };