React hook form как связать 2 элемента между собой для привязки к react-hook-form?

Question

[linoa123]

Вот у меня есть email-input.tsx и там есть 1 Select и 1 input как их оба в 1 сделать и привязать к react-hook-form?

import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from '@/components/ui/select';
import {
	DEFAULT_EMAIL_DOMAIN,
	EMAIL_DOMAINS,
} from '@/constants/auth.constants';
import { Input, InputProps } from './input';
import { formatEmailInput } from '@/lib/format-email-input';

interface IEmailInputProps extends InputProps {
}

const EmailInput: React.FC<IEmailInputProps> = ({
	...props
}) => {
	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		e.target.value = formatEmailInput(e.target.value);
    console.log(e.target.value);

		props?.onChange?.(e);
	};

	return (
		<div className='flex items-end'>
			<Input {...props} onChange={handleChange} />

			<Select defaultValue={DEFAULT_EMAIL_DOMAIN}>
				<SelectTrigger>
					<SelectValue />
				</SelectTrigger>
				<SelectContent>
					{EMAIL_DOMAINS.map(domain => (
						<SelectItem key={domain} value={domain}>
							{domain}
						</SelectItem>
					))}
				</SelectContent>
			</Select>
		</div>
	);
};

export default EmailInput;