Fetching and Displaying Data

Demonstrate how to use the `useQuery` hook to fetch data from an API and display it in a component, handling loading and error states.
import { useQuery } from '@tanstack/react-query';
import React from 'react';
First, import the useQuery hook from React Query and React.
const fetchUsers = async () => {
    const response = await fetch('');
    if (!response.ok) {
        throw new Error('Network response was not ok.');
    return response.json();
Define an asynchronous function to fetch users from the API.
function UsersComponent() {
    const {data, error, isLoading} = useQuery(['users'], fetchUsers);

    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>An error has occurred: {error.message}</div>;

    return (
            { => (
                <li key={}>{}</li>
Create a component that uses the useQuery hook to fetch and display the users. It handles loading and error states.