How can one efficiently manage the state or values of multiple forms using Zod schema with a single trigger button?

[wanfahdiva]

The preview of page like this:

and here my page code:

'use client'

import { useState } from 'react'

import { ArrowLink } from '@/components/atoms/arrow-link'
import { RegistrationEventDetailForm } from '@/components/molecules/form/registration-event-detail-form'
import { RegistrationPaymentMethodForm } from '@/components/molecules/form/registration-payment-method-form'
import { PaymentLayout } from '@/components/templates/payment-layout'

const RegistrationCreatePage = () => {
  const [submitting, setSubmitting] = useState(false)
  const [data, setData] = useState({})

  return (
    <PaymentLayout>
      <div className="flex flex-col min-h-screen mt-40 mb-24 space-y-6">
        <div>
          <ArrowLink url="/dashboard" title="Registration" />
        </div>
        <div className="flex space-x-14">
          <div className="flex flex-col flex-1 w-full space-y-6">
            <RegistrationEventDetailForm onDataSubmit={(e) => setData({ ...data, e })} isSubmitting={submitting} />
          </div>
          <div className="h-[637px] w-[365px] flex flex-col space-y-3">
            <p className="text-lg font-medium">Payment Method</p>
            <RegistrationPaymentMethodForm
              onDataSubmit={(e) => setData({ ...data, e })}
              isSubmitting={(e) => setSubmitting(e)}
            />
          </div>
        </div>
      </div>
    </PaymentLayout>
  )
}

export default RegistrationCreatePage

and here my first code form component:

'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect, useRef } from 'react'
import { useForm } from 'react-hook-form'
import * as z from 'zod'

import { Alert } from '@/components/atoms/alert'
import { RadioEventInput } from '@/components/atoms/form-radio-event'
import { Select } from '@/components/atoms/form-select'
import { Form } from '@/components/atoms/ui/form'

const PARTICIPANT_CATEGORY = [
  {
    label: 'VIP',
    value: 'VIP'
  },
  {
    label: 'VVIP',
    value: 'VVIP'
  }
]

const WORKSHOP = [
  {
    name: 'sample 1',
    event: [
      {
        label: 'title 1',
        subLabel: 'sub label 1',
        value: 'sub label 1',
        checked: false
      },
      {
        label: 'title 2',
        subLabel: 'sub label 2',
        value: 'sub label 2',
        checked: false
      },
      {
        label: 'title 3',
        subLabel: 'sub label 3',
        value: 'sub label 3',
        checked: false
      },
      {
        label: 'title 4',
        subLabel: 'sub label 4',
        value: 'sub label 4',
        checked: false
      },
      {
        label: 'title 5',
        subLabel: 'sub label 5',
        value: 'sub label 5',
        checked: false
      }
    ]
  }
]

interface RegistrationEventDetailFormProps {
  onDataSubmit: (data: unknown) => void
  isSubmitting: boolean
}

export const RegistrationEventDetailForm = ({ onDataSubmit, isSubmitting }: RegistrationEventDetailFormProps) => {
  const formRef = useRef<HTMLButtonElement>(null)

  const schema = z.object({
    participant_category: z.string().nonempty('Please select participant category'),
    workshop: z.string().nonempty('Please select workshop')
  })

  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: {
      participant_category: '',
      workshop: ''
    }
  })

  const onSubmit = (data: z.infer<typeof schema>) => {
    onDataSubmit(data)
    console.log('data1', data)
  }

  useEffect(() => {
    if (isSubmitting && formRef) {
      formRef.current?.click()
    }
  }, [isSubmitting, formRef, form])

  return (
    <div className="flex w-full p-8 bg-white border border-gray-200 rounded">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col w-full space-y-6">
          <div className="flex flex-col space-y-3">
            <p className="text-lg font-medium">Registration Details</p>
            <Select
              option={PARTICIPANT_CATEGORY}
              label="Participant Category"
              name="participant_category"
              placeholder="-- Select --"
              required
              {...form}
            />
          </div>
          <div className="flex flex-col space-y-3">
            <p className="font-medium">Select Your Workshop</p>
            <Alert
              type="info"
              message={
                <p className="text-sm">
                  Workshop will be held on <span className="inline font-medium">Thu, 28th November</span> starting at
                  <span className="inline font-medium">07.00-16.00 (WITA, GMT+8)</span>.
                </p>
              }
            />
            {WORKSHOP.map((workshop, index) => (
              <RadioEventInput key={index} name="workshop" label={workshop.name} options={workshop.event} {...form} />
            ))}
          </div>
          <button type="submit" className="hidden" ref={formRef} />
        </form>
      </Form>
    </div>
  )
}

and here my second form component:

'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import * as z from 'zod'

import { Input } from '@/components/atoms/form-input'
import { RadioPaymentMethodInput } from '@/components/atoms/form-radio-payment-method'
import { LockIcon } from '@/components/atoms/icons'
import { Button } from '@/components/atoms/ui/button'
import { Form } from '@/components/atoms/ui/form'

interface RegistrationPaymentMethodFormProps {
  onDataSubmit: (data: unknown) => void
  isSubmitting?: (e: boolean) => void
}

export const RegistrationPaymentMethodForm = ({ onDataSubmit, isSubmitting }: RegistrationPaymentMethodFormProps) => {
  const schema = z.object({
    payment_method: z.string().nonempty('Please select payment method'),
    vat_number: z.string().nonempty('Please enter VAT number')
  })

  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: {
      payment_method: '',
      vat_number: ''
    }
  })

  const onSubmit = (data: z.infer<typeof schema>) => {
    onDataSubmit(data)
  }

  return (
    <div className="flex flex-col space-y-3">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col space-y-3">
          <RadioPaymentMethodInput name="payment_method" {...form} />
          <Input type="number" name="vat_number" label="VAT Number" required {...form} />
          <p className="text-lg font-medium">Payment Detail</p>
          <div className="flex justify-between w-full pb-2 border-b">
            <p>Price per Pax</p>
            <p>IDR 4.650.000</p>
          </div>
          <div className="flex justify-between w-full text-lg font-semibold">
            <p>Total Amount Due</p>
            <p>IDR 4.650.000</p>
          </div>
          <Button
            type="submit"
            className="w-full h-auto py-3 mt-6 text-white rounded-full bg-primary bg-primary-blue"
            onClick={() => isSubmitting && isSubmitting(true)}
          >
            <LockIcon className="mr-1" />
            <span className="text-sm font-medium">Pay</span>
          </Button>
        </form>
      </Form>
    </div>
  )
}

i using shadcn and try to trigger the first form with ref, but when the form filled the value not showing, anyone can help me?