I’m trying to make a Select with Tailwind in React but I have an Infinite Loop error when I select an option

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Component Principal:

const optionsTipoEvento = [
  { id: 1, name: t("posts-master.views.event_types.birthday") },
  { id: 2, name: t("posts-master.views.event_types.assisteds") },
  { id: 3, name: t("posts-master.views.event_types.lessons") },
  { id: 4, name: t("posts-master.views.event_types.days_assist") },
  { id: 5, name: t("posts-master.views.event_types.days_renewal") },
];

const [selectTipoEvento, setSelectTipoEvento] = useState(optionsTipoEvento[0]);

<Select
selected={selectTipoEvento}
setSelected={(option) =>
setSelectTipoEvento(option)
}
options={optionsTipoEvento}
tittle={t("posts-master.views.event_type")}
/>

Component Select:

import { Label, Listbox } from "@headlessui/react";
import { FC, Fragment } from "react";
import { OptionsSelect } from "../molecules/OptionsSelect";
import { ButtonSelect } from "../molecules/ButtonSelect";

type option = { id: number; name: string };
export type Selectprops = {
  selected: option;
  setSelected: (option: option) => void;
  options: option[];
  tittle: string;
  textDescribe?: string;
};

export const Select: FC<Selectprops> = ({
  selected,
  setSelected,
  options,
  tittle,
  textDescribe,
}) => {
  return (
    <Fragment>
      <Listbox value={selected} onChange={(option) => setSelected(option)}>
        <div>
          <div>
            <Label className="block text-sm font-medium leading-6 text-gray-600">
              {tittle}
            </Label>
          </div>

          <div className="relative">
            <ButtonSelect nameSelected={selected.name} />
            <OptionsSelect options={options} />
          </div>

          {/* Descripción en gris */}
          <p className="mt-1 text-sm text-gray-400">{textDescribe}</p>
        </div>
      </Listbox>
    </Fragment>
  );
};

Component OptionSelect:

import { ListboxOptions, ListboxOption } from "@headlessui/react";
import { FC, Fragment } from "react";
import { SpanIconCheckSelect } from "../atoms/SpanIconCheckSelect";

type option = { id: number; name: string };

export type OptionsSelectprops = {
  options: option[];
};

export const OptionsSelect: FC<OptionsSelectprops> = ({ options }) => {
  return (
    <Fragment>
      <ListboxOptions
        transition
        className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none data-[closed]:data-[leave]:opacity-0 data-[leave]:transition data-[leave]:duration-100 data-[leave]:ease-in sm:text-sm"
      >
        {options.map((person) => (
          <ListboxOption
            key={person.id}
            value={person}
            className="group relative cursor-default select-none py-2 pl-8 pr-4 text-gray-300 data-[focus]:bg-indigo-600 data-[focus]:text-white"
          >
            <span className="block truncate font-normal group-data-[selected]:font-semibold text-gray-900">
              {person.name}
            </span>
            <SpanIconCheckSelect />
          </ListboxOption>
        ))}
      </ListboxOptions>
    </Fragment>
  );
};

I have tried useEffect and usememo but I didn’t have any solution