Fieldstate warning and Continue button does not perform next-pages

[viral-siddhapura]

Hello @DevAntonioRogers, I need your guidance on the below issue due to errors of "fieldState" from the form/ui component in the ShadCN UI library.

Tried to implement step-one.tsx file as it is from your repository with minor modifications. See the below image, Once click on the Continue button, it does not go to the next and also I see the warning in the browser below :

Warning: React does not recognize theformStateprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseformstateinstead. If you accidentally passed it from a parent component, remove it from the DOM element.

multi-step-form.tsx

"use client";

import { useState } from "react"
import { Progress } from "@/components/ui/progress";
import StepOne from "./step-one";

export default function MultiStepForm() {

    const [currentStep, setCurrentStep] = useState<number>(1);
    const [formData, setFormData] = useState({
        email: "",
        password: "",
        firstName: "",
        location: "",
        lastName: "",
    });

    const handleNextStep = (data: any) => {
        setFormData((prev) => ({ ...prev, ...data }));
        setCurrentStep(currentStep + 1);
    }

    const handlePreviousStep = () => {
        setCurrentStep(currentStep - 1);
    }

    const progressValue = (currentStep / 3) * 100;
    const stepText = () => {
        switch (currentStep) {
            case 1:
                return "Step 1: Create an account";
            case 2:
                return "Step 2: Skill Level";
            case 3:
                return "Step 3: Create Password";
            default:
                return "";
        }
    };

    return (
        <div className="w-2/3 p-8 flex flex-col">
            <div className="mb-8">
                <h1 className="text-2xl font-bold mb-2">{stepText()}</h1>
                <Progress value={progressValue} className="h-2" />
            </div>

            <div className="flex-grow flex flex-col justify-center max-w-md mx-auto w-full">
                {
                    currentStep === 1 && (
                        <StepOne onNext={handleNextStep} />
                    )
                }
            </div>
        </div>
    )
}

step-one.tsx:

"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

type StepOneProps = {
    onNext: (values: z.infer<typeof firstStepSchema>) => void;
};

export const firstStepSchema = z.object({
    email: z.string().email(),
    firstName: z.string(),
    lastName: z.string(),
    location: z.string(),
})

const StepOne = ({ onNext }: StepOneProps) => {

    const form = useForm<z.infer<typeof firstStepSchema>>({
        resolver: zodResolver(firstStepSchema),
    });

    const onSubmit = (values: z.infer<typeof firstStepSchema>) => {
        onNext(values);
    };

    return (
        <div>
            <h3 className="text-3xl font-bold">Register for an account</h3>
            <p className="text-gray-500 text-sm mt-3">👏🏻 Let's start with a little bit of information</p>

            <div className="mt-10">
                <Form {...form}>
                    <form
                        onSubmit={form.handleSubmit(onSubmit)}
                    >
                        <div className="grid grid-cols-2 gap-10 mb-5">
                            <FormField
                                control={form.control}
                                name="firstName"
                                render={(field) => (
                                    <FormItem>
                                        <FormLabel>First Name</FormLabel>
                                        <FormControl>
                                            <Input
                                                {...field}
                                                placeholder="Enter first name"
                                                type="text"
                                            />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="lastName"
                                render={(field) => (
                                    <FormItem>
                                        <FormLabel>Last Name</FormLabel>
                                        <FormControl>
                                            <Input
                                                {...field}
                                                placeholder="Enter last name"
                                                type="text"
                                            />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                        </div>
                        <FormField
                            control={form.control}
                            name="email"
                            render={(field) => (
                                <FormItem className="mb-5">
                                    <FormLabel>Email Address</FormLabel>
                                    <FormControl>
                                        <Input
                                            {...field}
                                            placeholder="Enter your email"
                                            type="email"
                                        />
                                    </FormControl>
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="location"
                            render={(field) => (
                                <FormItem>
                                    <FormLabel>Location</FormLabel>
                                    <FormControl>
                                        <Input
                                            {...field}
                                            placeholder="Enter your location"
                                            type="text"
                                        />
                                    </FormControl>
                                </FormItem>
                            )}
                        />
                        <Button
                            className="mt-5 w-full"
                            type="submit"
                        >Continue</Button>
                    </form>
                </Form>
            </div>

        </div>
    )
}

export default StepOne;

How to overcome this bug or issue to implement it further, I want to go to the next page but am not able to go due to this error.

Looking forward to knowing your thoughts on this, Thanks.

[viral-siddhapura]

@DevAntonioRogers Do I have any updates on this issue?