React-Query Fetch Data

import React from 'react';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { ListGroup, Alert } from 'react-bootstrap';

function List() {
  const {
    data: studentsList,
    isError,
    isLoading,
  } = useQuery(['students'], async () => (await axios.get(`/api/list`, { params: { house } }))?.data);

  if (isError) {
    return <Alert variant="danger">Error while fetching from the server.</Alert>;
  }

  if (isLoading) {
    return <Alert variant="warning">Loading...</Alert>;
  }

  return (
    <ListGroup variant="flush">
      {studentsList.map((el) => (
        <ListGroup.Item key={el.id}>
          <span className="float-start">
            <Image fluid src={`/assets/logo-${house}.png`} />
          </span>
          <span>{el.name}</span>
          <span className="float-end text-muted">{el.distance}</span>
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
}