Фокус React-Select исчезает при открытии меню

Я использую контролируемый элемент Select из React-Select внутри формы. Всякий раз, когда я пытаюсь открыть меню Select, фокус переходит на первый ввод на странице. Я не могу понять, почему.

Вот мой компонент:

import Select from "react-select">

export default function SelectOption({
  name,
  value,
  placeholder,
  options,
  labels,
  disabled_options,
  onChange,
  loading,
  defaultValue,
  filter,
  onBlur,
  inner_ref,
}: Props) {
  const using_options = useMemo(
    () => options.map((value, i) => ({ value, label: labels[i] })),
    [options]
  );

  if (loading) return <LoadingMarker />;

  return (
    <Select
      name = {name}
      menuPortalTarget = {document.body}
      styles = {{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
      options = {using_options}
      defaultValue = {using_options.find((op) => op.value === defaultValue)}
      isSearchable = {filter}
      isClearable = {true}
      filterOption = {(option, input) => option.label.includes(input)}
      isOptionDisabled = {(option) =>
        !!disabled_options && disabled_options.includes(option.value)
      }
      placeholder = {placeholder}
      value = {using_options.find((op) => op.value == value)}
      onChange = {(option) => onChange && onChange(option ? option.value : null)}
      onBlur = {onBlur}
      ref = {inner_ref}
    />
  );
}

Я пробовал это на нескольких разных страницах, некоторые с Select, управляемым через контроллер useForm, а некоторые через обычный useState. Я попытался установить значение на постоянное значение. Я попробовал убрать все реквизиты, но options. Он исправляется только тогда, когда находится не внутри формы.

Не могли бы вы мне помочь? я в тупике