Debugging Provided Code

Via Transportation shows dispatchers a live queue of ride requests for a service zone, polling the backend every few seconds and letting a dispatcher click a request to flag the one with the shortest ETA. Here is the component as it currently exists.

import { useEffect, useState } from "react";

interface RideRequest {
  id: string;
  riderName: string;
  etaMinutes: number;
}

function LiveRideQueue({ zoneId }: { zoneId: string }) {
  const [requests, setRequests] = useState<RideRequest[]>([]);
  const [selectedId, setSelectedId] = useState("");

  useEffect(() => {
    const interval = setInterval(() => {
      fetchRequestsForZone(zoneId).then((data) => {
        requests.push(...data);
        setRequests(requests);
      });
    }, 5000);
  }, []);

  function selectFastest() {
    const sorted = requests.sort((a, b) => a.etaMinutes - b.etaMinutes);
    setSelectedId(sorted[0].id);
  }

  return (
    <ul>
      {requests.map((req, index) => (
        <li key={index} onClick={selectFastest}>
          {req.riderName} - {req.etaMinutes} min {req.id === selectedId && "(selected)"}
        </li>
      ))}
    </ul>
  );
}

What is the issue in this component? Walk through everything wrong with it and explain what you would change and why.