1  import { forwardRef } from 'react';
 2  import { Select, SelectProps } from '@chakra-ui/react';
 3  import FormField, { UseFormFieldProps, useFormField } from './FormField';
 4  
 5  const SelectBase = forwardRef<HTMLSelectElement, SelectProps>(
 6    ({ id, ...props }, ref) => <Select {...props} id={id} ref={ref} />,
 7  );
 8  
 9  SelectBase.displayName = 'SelectBase';
10  
11  interface FormSelectProps extends UseFormFieldProps, SelectProps {
12    name: string;
13  }
14  
15  const FormSelect = forwardRef<HTMLSelectElement, FormSelectProps>(
16    (props, ref) => {
17      const { formFieldProps, childProps } = useFormField(props);
18  
19      return (
20        <FormField {...formFieldProps}>
21          <SelectBase {...childProps} ref={ref} />
22        </FormField>
23      );
24    },
25  );
26  
27  FormSelect.displayName = 'FormSelect';
28  
29  export default FormSelect;