UserExampleCell.tsx

import { useForm, Controller } from 'react-hook-form'
import Select from 'react-select/creatable'

export const QUERY = gql`
  query FindPlants {
    userExamples {
      id
      email
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }) => (
  <div style={{ color: 'red' }}>Error: {error.message}</div>
)

export const Success = ({ userExamples }) => {
  const methods = useForm()

  return (
    <form onSubmit={methods.handleSubmit((data) => console.log(data))}>
      <Controller
        control={methods.control}
        defaultValue={[]}
        name="field_name_product"
        render={({ field }) => {
          console.log(field)
          const { onChange, value, name, ref } = field
          return (
            <Select
              name={name}
              inputRef={ref}
              options={userExamples}
              value={userExamples.find((c) => c.id === value)}
              onChange={(val) => {
                onChange(val)
              }}
              getOptionValue={(option) => option.id}
              getOptionLabel={(option) => option.email}
              className="basic-multi-select"
              classNamePrefix="select"
              isMulti
            />
          )
        }}
      />
      <button type="submit">Submit</button>
    </form>
  )
}