How can I use forwardref in list box(select)?

[geunjae-grip]

I made my custom component like this.

const SelectBox = forwardRef(
  ({ options, value, onChange, multiple = false }: Props, ref: any) => (
    <Listbox
      by="value"
      value={value}
      onChange={onChange}
      multiple={multiple}
      ref={ref}
    >
      <Listbox.Button>
        <button type="button" className="h-6">
          {options.find((option) => option.value === value)?.label}
        </button>
      </Listbox.Button>
      <Listbox.Options>
        {options.map((option) => (
          <Listbox.Option
            key={option.value}
            value={option}
            disabled={option.disabled === false}
          >
            {option.label}
          </Listbox.Option>
        ))}
      </Listbox.Options>
    </Listbox>
  ),
);

But, It makes error like this.

Is there other way to use forwardref?