When using defaultValues in useForm hook, form values don't get updated

[imtheaman]

When passing defaultValues in useForm hook, form values don't get updated but form.watch method returns the updated input field value as watch returns from the state change, but on submission i get error that the field is required even after having the values in the field. after submission onInvalid prop method gets executed where i'm logging. log's attached below.

Component.tsx

'use client';
import { Button, Form, Input } from "@/components/ui";
import { AppFormField, AppSelect, DatePicker } from "@/components";
import { Combobox } from "@/components";
import { MouseEventHandler } from "react";
import { PersonIcon } from "@radix-ui/react-icons";
import { GenderEnum } from "@/utils/enums";
import useLogic from "./useLogic";

const PersonalDetails = ({ defaultValues, onDismiss, onComplete, userId }: { userId?: string, defaultValues?: any, onDismiss: MouseEventHandler<HTMLButtonElement>, onComplete: Function }) => {
    const { onSubmit, form, countryData, stateData, districtData, setDistrictQuery } = useLogic(defaultValues, userId, onComplete);

    return (
        <Form {...form}>
            <form className="flex flex-col gap-8" onSubmit={form.handleSubmit(onSubmit)}>
                <h2 className="text-[1.6vw]">Personal Details</h2>
                <div className="grid grid-cols-2 gap-8">
                    <AppFormField content={InputField} control={form.control} name="user[first_name]" label="First Name" />
                    <AppFormField content={InputField} control={form.control} name="user[last_name]" label="Last Name" />
                    <AppFormField content={InputField} control={form.control} name="user[father_first_name]" label="Father First Name" />
                    <AppFormField content={InputField} control={form.control} name="user[father_last_name]" label="Father First Name" />
                    <AppFormField content={InputField} control={form.control} name="user[spouse_first_name]" label="Spouse First Name" />
                    <AppFormField content={InputField} control={form.control} name="user[spouse_last_name]" label="Spouse Last Name" />
                    <AppFormField content={Gender} control={form.control} name="user[gender]" label="Gender" />
                    <AppFormField content={Dob} control={form.control} name="user[dob]" label="Dob" />
                    <Combobox label="Country" data={countryData} form={form} name="user[pob_country_id]" placeholder="Select Your Country" />
                    <Combobox label="State" data={stateData} form={form} name="user[pob_state_id]" placeholder="Select Your State" />
                    <Combobox label="District" data={districtData} form={form} name="user[pob_district_id]" placeholder="Select Your District" onQuery={setDistrictQuery} />
                    <AppFormField content={InputField} control={form.control} name="user[pob_city]" label="City" />
                    <AppFormField className='col-span-2' content={InputField} control={form.control} name="user[additional_information]" label="Additional Info" />
                </div>
                <div className="flex items-center mt-4 space-x-2">
                    <Button variant={"secondary"} type="submit">Save Details</Button>
                    <Button variant={"default"} onClick={onDismiss}>Cancel</Button>
                </div>
            </form>
        </Form>
    );
};

export default PersonalDetails;

function InputField({ field }) {
    return <Input className="w-full" type="text" variant={"default"} elementSize={"lg"} radius={"md"} {...field} />
}
function Gender({ field }) {
    return <AppSelect data={GenderEnum} placeholder="Select Gender" radius={"md"} variant={"outline"} value={field.value} onValueChange={field.onChange} icon={<PersonIcon />} id="user[gender]" />
}
function Dob({ field: { ref, ...otherFields } }) {
    return <DatePicker icon variant={"default"} radius={"md"} placeholder="Date of birth" {...otherFields} />
}

useLogic.tsx

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useCookies } from "next-client-cookies";
import { useLocation } from "@/utils/hooks";
import FormSchema from "./schema";
import * as z from 'zod';
import { networkRequest } from "@/utils";
import CONSTANTS from "@/constants";
import { useState } from "react";

export default function useLogic(defaultValues, userId, onComplete) {
    const [districtQuery, setDistrictQuery] = useState('');
    const cookies = useCookies();

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

    async function onSubmit(data: z.infer<typeof FormSchema>) {
        const params = new URLSearchParams();
        let endpoint = CONSTANTS.apiEndpoints.profileC;

        Object.entries(data).forEach(([key, value]) => {
            const objectValues = ['user[pob_country_id]', 'user[pob_state_id]', 'user[pob_district_id]', 'user[pob_pincode_id]'];
            if (objectValues.includes(key)) {
                params.append(key, form.watch(key).id)
            } else params.append(key, form.watch(key))
        })

        if (defaultValues) {
            params.append("_method", "patch")
            endpoint = CONSTANTS.apiEndpoints.profileU(userId)
        }
        const response = await networkRequest(endpoint, {
            method: "POST",
            headers: {
                'Authorization': `Bearer ${cookies.get('token')}`,
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: params,
            notify: true
        },)
        response.success && onComplete()
    }

    const { countryData, stateData, districtData } = useLocation(form.watch('user[pob_country_id]'), form.watch('user[pob_state_id]'), districtQuery, '');
    return { onSubmit, form, countryData, stateData, districtData, setDistrictQuery }
}

schema.ts

import * as z from "zod";
import { GenderEnum } from "@/utils/enums"

const FormSchema = z.object({
    'user[profile_image]': z.any().optional(),
    'user[first_name]': z.string({
        required_error: "Name is required",
        invalid_type_error: "Not a valid type"
    }),
    'user[last_name]': z.string({
        required_error: "Name is required",
        invalid_type_error: "Not a valid type"
    }),
    'user[father_first_name]': z.string({
        required_error: "Father's first name is required",
        invalid_type_error: "Not a valid type"
    }),
    'user[father_last_name]': z.string({
        required_error: "Father's last name is required",
        invalid_type_error: "Not a valid type"
    }),
    'user[spouse_first_name]': z.string({
        required_error: 'Spouse First Name is required',
        invalid_type_error: "Not a valid type"
    }).optional(),
    'user[spouse_last_name]': z.string({
        required_error: 'Spouse Last Name is required',
        invalid_type_error: "Not a valid type"
    }).optional(),
    'user[primary_phone]': z.string({
        required_error: 'Primary Phone is required',
        invalid_type_error: "Not a valid type"
    }),
    'user[alternate_phone_attributes][value]': z.string({}).optional(),
    'user[user_landline_attributes][value]': z.string({}).optional(),
    'user[gender]': z.nativeEnum(GenderEnum, {
        required_error: "Gender is required",
        invalid_type_error: "Not a valid type"
    }),
    'user[dob]': z.date({
        required_error: "Date of birth is required.",
        invalid_type_error: 'Not a valid type'
    }),
    'user[user_email_attributes][value]': z.string({
        required_error: "Email is required"
    }).optional(),
    'user[pob_country_id]': z.object({
        id: z.string({
            required_error: "Country is required"
        }),
        name: z.string({
            required_error: "Country is required"
        })
    }),
    'user[pob_state_id]': z.object({
        id: z.string({
            required_error: "State is required"
        }),
        name: z.string({
            required_error: "State is required"
        })
    }),
    'user[pob_district_id]': z.object({
        id: z.string({
            required_error: "District is required"
        }),
        name: z.string({
            required_error: "District is required"
        })
    }),
    'user[pob_city]': z.string().optional(),
    'user[additional_information]': z.string().optional(),
})

export default FormSchema

[imtheaman]

I got the solution. basically i was defining my schema with names like "user[first_name]" which react-hook-form parses as

{
   user: {
              first_name: undefined
         }
}

and that's the problem, when i fixed my schema name from "user[first_name]" to

user: z.object({
       first_name: z.string({
       })
})

it's solved and working as expected.