In the following multi part form handling …tell me what i need to change if I allow images/doc uploads for awards data. : import React, { useState } from 'react';
import { useForm, FormProvider, useFormContext } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { FullFormData, FullFormSchema, BusinessInfo, ContactPerson, Address, telephone } from '../types/form';
import { Award, Program, FormPartSchema } from '../types/form';

# // --- Child Components (defined below) ---
import BusinessInfoForm from '../components/BusinessInfoForm';
import OfficeAddressForm from '../components/OfficeAddressForm';
import WarehouseAddressForm from '../components/WarehouseAddressForm';
import TelephoneForm from '../components/TelephoneForm';
import ContactPersonsForm from '../components/ContactPersonsForm';
import AwardsForm from '../components/AwardsForm';
import ProgramsForm from '../components/ProgramsForm';

# // --- Initial Data State ---
const initialFormData: FullFormData = {

  business_info: { business_name: '',
                   business_registration_doc: '',
                   business_registration_doc_path: '',
                   year_incorporated: 1990,
                   founder_CEO: '',
                   website: " ",
                   category: 'others',
                   },
  office_address: { street: ' ', 
                    city: '', 
                    state: '', 
                    postal_code: '', 
                    country: '' }, 

  warehouse_address: { street: ' ', 
                       city: '', 
                       state: '', 
                       postal_code: '', 
                       country: '' },

  telephone: { country_code: ' ', area_code: '', telephone_number: '' }, 
                   
  awards: [ { id: ' ', award_name: ' ', year: 1900, issuiing_organization: '', award_file:File, award_path: '' },
           ],
  contact_persons: [ { id: '1', first_name: '', last_name: '', email: '', phone: '', role: '' }, // Start with one contact
                    ],
  programs: [ { program_id: ' ', program_name: '', program_status: '' },
             ],
};



# multipart form
const MultiPartForm: React.FC = () => {
  const [currentStep, setCurrentStep] = useState(0);
  const [formData, setFormData] = useState<FullFormData>(initialFormData);

  # // React Hook Form instance for the entire form, with validation based on the FULL form schema
  const methods = useForm<FullFormData>({
    resolver: zodResolver(FullFormSchema),
    defaultValues: initialFormData,
    mode: 'onBlur', # // Validate on blur for better UX
  });

  const {
    handleSubmit,
    trigger, # // Used to manually trigger validation for a specific part
    getValues, # // To get current values without re-rendering
    formState: { errors, isValidating }, # // Access form errors
    setError, # // To manually set errors
    clearErrors, # // To clear errors
  } = methods;

  const steps = [
    { name: 'Business Information', component: BusinessInfoForm, schemaPart: FormPartSchema.business_info },
    { name: 'Office Address', component: OfficeAddressForm, schemaPart: FormPartSchema.office_address },
    { name: 'Warehouse Address', component: WarehouseAddressForm, schemaPart: FormPartSchema.warehouse_address },
    { name: 'Telephone', component: TelephoneForm, schemaPart: FormPartSchema.telephone },
    { name: 'Contact Persons', component: ContactPersonsForm, schemaPart: FormPartSchema.contact_persons },
    { name: 'Awards', component: AwardsForm, schemaPart: FormPartSchema.awards },
    { name: 'Programs', component: ProgramsForm, schemaPart: FormPartSchema.programs },
  ];

  const CurrentFormComponent = steps[currentStep].component;

  const handleNext = async () => {
    const currentPartName = Object.keys(FormPartSchema)[currentStep] as keyof typeof FormPartSchema;
    const currentPartSchema = steps[currentStep].schemaPart;

    # // Manually trigger validation for the current part of the form
    # // We need to extract the relevant part of the data to validate against its specific schema
    const valuesForCurrentStep = getValues();
    let dataToValidate: any = {};
    if (currentPartName === 'business_info') {
      dataToValidate = { business_info: valuesForCurrentStep.business_info };
    } else if (currentPartName ==='office_address') {
      dataToValidate = { office_address: valuesForCurrentStep.office_address }; // Wrap in object to match schema
    } else if (currentPartName ==='warehouse_address') {
      dataToValidate = { warehouse_address: valuesForCurrentStep.warehouse_address }; // Wrap in object to match schema
    } else if (currentPartName ==='telephone') {
      dataToValidate = { telephone: valuesForCurrentStep.telephone }; // Wrap in object to match schema         
    } else if (currentPartName === 'contact_persons') {
      dataToValidate = { contact_persons: valuesForCurrentStep.contact_persons }; // Wrap in object to match schema
    } else if (currentPartName === 'awards') {
      dataToValidate = { awards: valuesForCurrentStep.awards }; // Wrap in object to match schema
    } else if (currentPartName === 'programs') {
      dataToValidate = { programs: valuesForCurrentStep.programs }; // Wrap in object to match schema
    }

    try {
      await currentPartSchema.parseAsync(dataToValidate);
      # // If validation passes, update global state and proceed
      setFormData(getValues()); # // Update the master form data with the latest values
      setCurrentStep((prev) => prev + 1);
      clearErrors(); # // Clear any previous step-level errors
    } catch (error: any) {
      if (error.issues) {
        error.issues.forEach((issue: any) => {
          # // Map Zod errors to RHF errors
          const fieldName = `${currentPartName}.${issue.path[issue.path.length - 1]}`; // Simple path mapping
          # // If it's an array field, map it correctly. e.g., contactPersons.0.firstName
          if (issue.path.length > 1 && typeof issue.path[0] === 'string' && typeof issue.path[1] === 'number') {
            setError(`${issue.path[0]}.${issue.path[1]}.${issue.path[2]}` as any, {
              type: 'manual',
              message: issue.message,
            });
          } else {
             setError(issue.path.join('.') as any, { // For direct fields like business_info.business_name
              type: 'manual',
              message: issue.message,
            });
          }
        });
      }
      console.error("Validation error:", error);
    }
  };

  const handleBack = () => {
    setCurrentStep((prev) => prev - 1);
  };

  const onSubmit = async (data: FullFormData) => {
    #// Before submission, update the final formData from react-hook-form's state
    setFormData(data);

    #// Prepare data for FastAPI. Handle file upload separately.
    const formDataToSend = new FormData();

    #// Append business info (excluding registration doc for now)
    Object.entries(data.business_info).forEach(([key, value]) => {
      if (key !== 'business_registration_doc') {
        formDataToSend.append(`business_info[${key}]`, String(value));
      }
    });

    #// Append file if exists
    if (data.business_info.business_registration_doc instanceof File) {
      formDataToSend.append('business_registration_doc', data.business_info.business_registration_doc);
    }

     #// Append office address 
    Object.entries(data.office_address).forEach(([key, value]) => {
        formDataToSend.append(`office_address[${key}]`, String(value));
    });

    #// Append warehouse address 
    Object.entries(data.warehouse_address).forEach(([key, value]) => {
        formDataToSend.append(`warehouse_address[${key}]`, String(value));
    });

    #// Append telephone 
    Object.entries(data.telephone).forEach(([key, value]) => {
        formDataToSend.append(`telephone[${key}]`, String(value));
    });

    # // Append arrays as JSON strings
    formDataToSend.append('contact_persons', JSON.stringify(data.contact_persons));
    formDataToSend.append('awards', JSON.stringify(data.awards));
    formDataToSend.append('programs', JSON.stringify(data.programs));

    try {
      #// Fast API call
      console.log('Submitting form data...');

      const response = await fetch('/api/submit-form', { // Replace with your FastAPI endpoint
        method: 'POST',
        body: formDataToSend, // Use FormData for file uploads
        // If not sending files, use:
        // headers: { 'Content-Type': 'application/json' },
        // body: JSON.stringify(data),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const result = await response.json();
      console.log('Form submission successful:', result);
      alert('Form submitted successfully!');
      // Optionally reset form or redirect
    } catch (error) {
      console.error('Form submission failed:', error);
      alert('Form submission failed. Please try again.');
    }
  };

  return (
    <div className="container mx-auto p-4 max-w-2xl">
      <h1 className="text-3xl font-bold mb-6 text-center">Multi-Part Business Registration</h1>

      <div className="flex justify-between mb-8">
        {steps.map((step, index) => (
          <div key={index} className={`flex-1 text-center ${index === currentStep ? 'text-blue-600 font-semibold' : 'text-gray-500'}`}>
            <span className={`inline-block w-8 h-8 rounded-full flex items-center justify-center mr-2
                             ${index <= currentStep ? 'bg-blue-600 text-white' : 'bg-gray-300 text-gray-700'}`}>
              {index + 1}
            </span>
            {step.name}
          </div>
        ))}
      </div>

      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
          <div>
            <CurrentFormComponent />
          </div>

          <div className="flex justify-between mt-8">
            {currentStep > 0 && (
              <button
                type="button"
                onClick={handleBack}
                className="px-6 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400"
              >
                Back
              </button>
            )}

            {currentStep < steps.length - 1 && (
              <button
                type="button"
                onClick={handleNext}
                className="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 ml-auto"
              >
                Next
              </button>
            )}

            {currentStep === steps.length - 1 && (
              <button
                type="submit"
                className="px-6 py-2 bg-green-600 text-white rounded hover:bg-green-700 ml-auto"
              >
                Submit
              </button>
            )}
          </div>
        </form>
      </FormProvider>
    </div>
  );
};

export default MultiPartForm;