combobox popover component

import { useId, useRef, useState } from "react";

type Option = { name: string; value: string };

export const Dropdown = ({ name, value, options }: { name: string; value: string; options: Option[] }) => {
  const [selectedOption, setSelectedOption] = useState<Option | null>(null);
  const popoverId = useId();
  const anchorName = `--anchor-${popoverId.replaceAll(":", "-")}`;

  const popoverRef = useRef<HTMLDivElement>(null);

  return (
    <div>
      <input type="hidden" name={name} value={value} />

      <button
        role="combobox"
        type="button"
        popoverTarget={popoverId}
        popoverTargetAction="toggle"
        style={{
          anchorName,
        }}
      >
        {selectedOption?.name}
      </button>

      <div
        role="group"
        popover="auto"
        id={popoverId}
        ref={popoverRef}
        style={{
          positionAnchor: anchorName,
        }}
      >
        <div role="listbox">
          {options.map((option) => (
<div key={option.value} role="listitem">
  <button
    role="option"
    aria-selected={selectedItem === item}
    onClick={() => {
      setSelectedOption(option);
      popoverRef.current!.hidePopover();
    }}
  >
    <div>{option.name}</div>
  </button>
</div>
          ))}
        </div>
      </div>
    </div>
  );
};