React Component keeps re-rendering/reloading

Question

I am new to React currently doing my first react project. I can't figure out the issue here. Below is my code. User is redirected from another page to this page when they entered their search team and click search.

const Result = () => {
const navigate = useNavigate();
  const [routes, setRoutes] = useState([]);
  const { from, destination } = useParams();
  const [departureLocation, setDepartureLocation] = useState(from);
  const [destinationLocation, setDestinationLocation] = useState(destination);
  const onSubmit = (e) => {
      e.preventDefault();
          navigate('/result/' + departureLocation + '/' + destinationLocation);
  };
  useEffect(() => {
     refreshRoutes();
  }, []);

  const refreshRoutes = () => {
        API.get("routes/")
        .then((res) => {
            setRoutes(res.data);
        })
  };
  return (
    <div className = "container mt-5">
      < div className = "row" >
        <div className="col-md-4">
          <Form onSubmit={onSubmit} className="mt-4">
            <Form.Group className="mb-3" controlId="formBasicGenre">
              <Form.Label>Departure Location</Form.Label>
              <Form.Control as="select" 
                value={departureLocation}
                onChange={(e) => setDepartureLocation(e.target.value)}>
                  <option value="jajarkot">Jajarkot</option>
            </Form.Control>
            </Form.Group>
            <Form.Group className="mb-3" controlId="formBasicStarring">
              <Form.Label>Destination Location</Form.Label>
              <Form.Control as="select"
                placeholder="Enter Destination Location"
                value={destinationLocation}
                onChange={(e) => setDestinationLocation(e.target.value)}>
                  <option value="palpa">Palpa</option>
              </Form.Control>
            </Form.Group>
          </Form>
        </div>
        <div className="col-md-8 m">
          <table className="table">
            <thead>
              <tr>
                <th className="table-light" scope="col">ID</th>
                <th className="table-light" scope="col">Company Name</th>
                <th className="table-light" scope="col">Departure</th>
                <th className="table-light" scope="col">Destination</th>
                <th className="table-light" scope="col">Departure</th>
                <th className="table-light" scope="col">Arrival</th>
                <th className="table-light" scope="col">Departure Date</th>
                <th className="table-light" scope="col">Price</th>
              </tr>
            </thead>
            <tbody>
              {routes.map((route, index) => {
                return (
                  route.departureLocation === from && route.destinationLocation === destination ?
                  <tr key="">
                    <th className="table-light" scope="row">{route.vehicleID}</th>
                    <td className="table-light"> {route.name}</td>
                    <td className="table-light"> {route.destinationLocation}</td>
                    <td className="table-light"> {route.departureLocation}</td>
                    <td className="table-light"> {route.departureTime}</td>
                    <td className="table-light"> {route.arrivalTime}</td>
                    <td className="table-light"> {route.departureDate}</td>
                    <td className="table-light"> {route.price}</td>
                  </tr>
                  : null
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

When it is redirected to result page as /result/kathmandu/gulmi it does shows the data that matches the parameter. But whenever I click on the dropdown option, the filtered data is appended in the table. I can't figure out whats causing the issue.