Conditional rendering in <Form> component

[shankhadevpadam]

I am migrating useForm to the new Form component. In this case, how to migrate this into a new Form component compatible

<div className="space-y-4">
    <div className="flex items-center space-x-2">
        <Checkbox
            id="isBusiness"
            checked={data.is_business_donation}
            onCheckedChange={() => setData('is_business_donation', !data.is_business_donation)}
        />
        <Label htmlFor="isBusiness" className="text-sm font-medium">
            Are you donating under your business?
        </Label>
    </div>

    {data.is_business_donation && (
        <div className="space-y-4 rounded-lg bg-blue-50 p-4">
            <h3 className="text-lg font-semibold text-gray-900">Business Information</h3>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div className="space-y-2">
                    <Label htmlFor="business_name">Business Name *</Label>
                    <Input
                        id="business_name"
                        name="business_name"
                        className={`py-5 ${errors.business_name && 'border-red-500 ring ring-red-500'}`}
                        value={data.business_name}
                        onChange={(e) => setData({ ...data, business_name: e.target.value })}
                        required={data.is_business_donation}
                    />
                </div>
                <div className="space-y-2">
                    <Label htmlFor="business_abn">ABN *</Label>
                    <Input
                        id="business_abn"
                        name="business_abn"
                        className={`py-5 ${errors.business_abn && 'border-red-500 ring ring-red-500'}`}
                        value={data.business_abn}
                        onChange={(e) => setData({ ...data, business_abn: e.target.value })}
                        required={data.is_business_donation}
                    />
                </div>
            </div>
        </div>
    )}
</div>