How to retrieve child form values when parent form is submitted in Reactjs?

I’m currently working on a React project which is using Shadcn ui Form and React Form Hook to create the forms. I have a MainForm component responsible for rendering either an ArrivalForm or DepartureForm based on user selection.

How can I retrieve the values entered in both the MainForm and ArrivalForm components specifically when the user selects Arrival and submits the MainForm?

Here’s a simplified version of my code structure:

//this is mainform.tsx
export function MainForm() {
  const { toast } = useToast();
  const [formSelected, setFormSelected] = useState<string | null>('');
  // 1. Define your form using Schema define from z.
  const form = useForm<z.infer<typeof mainFormSchema>>({
    resolver: zodResolver(mainFormSchema),
    defaultValues: {
      fullname: '',
      email: '',
      formSelected: undefined,
    },
  });

  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof mainFormSchema>) {
    console.log(values);
    toast({
      title: 'Submit Values is:',
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
        </pre>
      ),
    });
  }

  // 3. Return a form
  return (
    <>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
          <FormField
            control={form.control}
            name="fullname"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Fullname</FormLabel>
                <FormControl>
                  <Input placeholder="Please input your full name" {...field} />
                </FormControl>
                <FormDescription>
                  This is your public display name.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input placeholder="Please input your email" {...field} />
                </FormControl>
                <FormDescription>
                  This is your public display name.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="formSelected"
            render={({ field }) => (
              <FormItem>
                <RadioGroup
                  onValueChange={field.onChange}
                  defaultValue={field.value}
                >
                  <div className="flex">
                    <div className="flex items-center space-x-2 px-2">
                      <RadioGroupItem
                        value="arrival"
                        id="arrival"
                        onClick={() => {
                          setFormSelected('arrival');
                        }}
                      />
                      <Label htmlFor="arrivalRadio">Arrival</Label>
                    </div>
                    <div className="flex items-center space-x-2 px-2">
                      <RadioGroupItem
                        value="departure"
                        id="departure"
                        onClick={() => {
                          setFormSelected('departure');
                        }}
                      />
                      <Label htmlFor="departureRadio">Departure</Label>
                    </div>
                  </div>
                </RadioGroup>
                <FormMessage />
              </FormItem>
            )}
          />

          {formSelected === 'arrival' ? <ArrivalForm /> : null}
          {formSelected === 'departure' ? <DepartureForm /> : null}

          <Button type="submit">Submit</Button>
        </form>
      </Form>
    </>
  );
}

// This is arrivalForm.tsx
export function ArrivalForm() {
  // 1. Define your form using Schema define from z.
  const form = useForm<z.infer<typeof arrivalFormSchema>>({
    resolver: zodResolver(arrivalFormSchema),
    defaultValues: {
      guestName: '',
      arrivalInfo: '',
    },
  });

  // 2. Define a submit handler.
  function arrivalFormSubmit(values: z.infer<typeof arrivalFormSchema>) {
    // pass form values to the parent form:
    console.log(values);
  }

  // 3. Return a form
  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(arrivalFormSubmit)}
        className="space-y-8"
      >
        <FormField
          control={form.control}
          name="guestName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Guest Name</FormLabel>
              <FormControl>
                <Input placeholder="input Guest Name" {...field} />
              </FormControl>
              <FormDescription>Guest Name here</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="arrivalInfo"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Arrival Infomation</FormLabel>
              <FormControl>
                <Input placeholder="input Arrival Info Here" {...field} />
              </FormControl>
              <FormDescription>Arrival Info here</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
      </form>
    </Form>
  );
}

// mainFormSchema 
export const mainFormSchema = z.object({
  fullname: z.string().min(2, {
    message: 'Username must be at least 2 characters.',
  }),
  email: z.string().min(2, {
    message: 'Username must be at least 2 characters.',
  }),
  formSelected: z.enum(['arrival', 'departure'], {
    message: 'You need to select a booking type.',
  }),
});

// arrivalFormSchema
export const arrivalFormSchema = z.object({
  guestName: z.string().min(2, {
    message: 'Guest name must be at least 2 characters.',
  }),
  arrivalInfo: z.string().min(2, {
    message: 'Please enter arrival info',
  }),
});