Next.js page does not update UI after fetching API data using useEffect

I am working on a Next.js application and fetching data from an external API using the useEffect hook.

The API call is successful and I can see the response in the browser console, but the component UI does not update with the fetched data.

My goal is to render the API data inside the component once the request is completed.

However, even after updating the state, the UI remains empty.

Expected result:

After the API call completes, the component should re-render and display the fetched data on the page.

Actual result:

The API response appears in the console, but nothing is rendered in the UI.

import { useEffect, useState } from "react"; export default function Home() { const [users, setUsers] = useState([]); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/users") .then((res) => res.json()) .then((data) => { console.log(data); setUsers(data); }); }, []); return ( <div> {users.map((user) => ( <p key={user.id}>{user.name}</p> ))} </div> ); }

I verified that the API returns valid data.

I logged the response using console.log and confirmed the state is updating.

I also checked the dependency array in useEffect, but the UI still does not update.