问ReactJS:创建选择菜单时无法读取event.target.value

EN

import { connectMenu } from "react-instantsearch-dom";
import React, { useState, Fragment, useEffect } from "react";
import { Listbox, Transition } from "@headlessui/react";
import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

const MobileDropdownS = ({ label, currentRefinement, refine, hide }) => {
  const [selected, setSelected] = useState(true);
 
  const items= [
      { value: 'category', label: 'Category' },
      { value: 'brand', label: 'Brand' },
      { value: 'color', label: 'Color' },
      { value: 'size', label: 'Size' },
  ]

  if (hide) return null;
  return (
    <Listbox
      onChange={(event) => {
        refine(event.target.value);
        setSelected(event.target.value);
      }}
      value={currentRefinement || ""}
    >
      {({ open }) => (
        <div>
          <Listbox.Label>{label}</Listbox.Label>
          <div>
            <Listbox.Button>
              <span>{label}</span>
            </Listbox.Button>

            <Listbox.Options>
              {items.map((item) => (
                <Listbox.Option
                  key={item.label}
                  value={item.isRefined ? currentRefinement : item.value}
                  key={item.label}
                  className={({ active }) =>
                    classNames(
                      active ? "text-white bg-indigo-600" : "text-gray-900",
                      "cursor-default select-none relative py-2 pl-3 pr-9"
                    )
                  }
                >
                  {({ selected, active }) => (
                    <>
                      <div className="flex items-center">
                        <span
                          className={classNames(
                            selected ? "font-semibold" : "font-normal",
                            "ml-3 block truncate"
                          )}
                        >
                          {item.label}
                        </span>
                      </div>

                      {selected ? (
                        <span
                          className={classNames(
                            active ? "text-white" : "text-indigo-600",
                            "absolute inset-y-0 right-0 flex items-center pr-4"
                          )}
                        >
                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
                        </span>
                      ) : null}
                    </>
                  )}
                </Listbox.Option>
              ))}
            </Listbox.Options>
          </div>
        </div>
      )}
    </Listbox>
  );
};

const MobileDropdownSelect = connectMenu(MobileDropdownS);

export default MobileDropdownSelect;

refine(event.target.value);
setSelected(event.target.value);

×
TypeError: Cannot read properties of undefined (reading 'value')
onChange
D:/Gatsby/XTheme/src/components/search/MobileDropdown.jsx:22
  19 | <Listbox 
  20 | onChange={
  21 |    event => {
> 22 |     refine(event.target.value)
  23 |     setSelected(event.target.value)
  24 |   } 
  25 | }