Shared field between 2 forms

import { Button, Field, Icon, dataAttr } from '@mando/design-system'
import { type FormApi, Field as FormField } from '@tanstack/react-form'
import type { zodValidator } from '@tanstack/zod-form-adapter'
import type { FC } from 'react'
import { z } from 'zod'

export function EmailField<
    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
    T extends FormApi<any, any> = FormApi<
        { email: string },
        ReturnType<typeof zodValidator>
    >,
>({ form }: { form: T }) {
    return (
        <FormField
            name='email'
            form={form}
            validators={{
                onSubmit: z.string().email('Invalid email address'),
            }}
        >
            {(field) => (
                <Field.Root invalid={Boolean(field.state.meta.errors.length)}>
                    <Field.Label>Your Email</Field.Label>
                    <Field.Control>
                        <Field.Input
                            name={field.name}
                            value={field.state.value}
                            onBlur={field.handleBlur}
                            onChange={(e) => field.handleChange(e.target.value)}
                            type='email'
                            placeholder='[email protected]'
                        />
                    </Field.Control>
                    <Field.ErrorText>{field.state.meta.errors}</Field.ErrorText>
                </Field.Root>
            )}
        </FormField>
    )
}