Maximum update depth exceeded error using User Menu component

[pphmtrungkin]

Hi there. I'm doing my personal project using Supabase for the database. I'm fetching the array from the database and use it for the player menu component. I appreciate the help if anyone can spot the error.

const Game = () => { const [players, setPlayers] = useState([]); const {user} = useContext(UserContext) const fetchPlayers = async () => { if (user) { const { data, error } = await supabase .from("players") .select("*") .eq("user_id", user.id); if (error) { console.error("Error fetching players: ", error.message); return; } setPlayers(data); } }; return ( <PlayerSelect players={players} /> ) }
`const PlayerSelect = ({ players }) => {
const [selected, setSelected] = useState(players[0] || null);
return (

{selected && selected.avatar_url ? (


{selected.name}

) : (

)}

    <ListboxOptions
      transition
      className="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 shadow-lg ring-black/5 focus:outline-hidden data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm"
    >
      {players.map((person) => (
        <ListboxOption
          key={person.id}
          value={person}
          className="group relative cursor-default py-2 pr-9 pl-3 text-gray-900 select-none data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden"
        >
          <div className="flex items-center">
            <img alt="" src={person.avatar_url} className="size-5 shrink-0 rounded-full" />
            <span className="ml-3 block truncate font-normal group-data-selected:font-semibold">{person.name}</span>
          </div>

          <span className="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 group-not-data-selected:hidden group-data-focus:text-white">
            <CheckIcon aria-hidden="true" className="size-5" />
          </span>
        </ListboxOption>
      ))}
    </ListboxOptions>
  </div>
</Listbox>

);
};`