I have this Autocomplete component

const Select = ({ name, control, defaultValue }) => {
  return (
    <div>
      Select
      <Controller
        as={
          <Autocomplete
            id="product"
            multiple
            style={{ width: 300 }}
            options={name}
            autoHighlight
            renderInput={(params) => (
              <TextField
                {...params}
                label="Product"
                variant="outlined"
                fullWidth
              />
            )}
          />
        }
        name="country"
        control={control}
      />
    </div>
  );
};

export default Select;

This is the FieldArray where I will be using this component:

const FieldArray = ({ control, register, setValue, getValues }) => {
  const { fields, append, remove, prepends } = useFieldArray({
    control,
    name: "order"
  });

  renderCount++;

  return (
    <div>
      <ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              <Select control={control} />
              <select {...register(`order.${index}.product`)}>
                <option value="shirt1">shirt1</option>
                <option value="shirt2">shirt2</option>
                <option value="shirt3">shirt3</option>
              </select>

              <button type="button" onClick={() => remove(index)}>
                Delete
              </button>
              <NestedArray nestIndex={index} {...{ control, register }} />
            </li>
          );
        })}
      </ul>
      <section>
        <button
          type="button"
          onClick={() => {
            append({ name: "append" });
          }}
        >
          Add product
        </button>
      </section>
    
    </div>
  );
};

export default FieldArray;

For now, I have commented the Select in my codesandbox because this will always cause an error that says e.render is not a function

How can I make a reusable AutoComplete component?

Codesandbox: https://codesandbox.io/s/react-hook-form-wizard-form-complete-nnew-hvu5t8?file=/src/fieldArray.js:498-531