products.map is not a function in console.log() data got

'use client'import React, { useEffect, useState } from 'react';export default function Page() {    const [products, setProducts] = useState(null);     useEffect(() => {        const fetchData = async () => {            try {                const response = await fetch("https://dummyjson.com/products");                const data = await response.json();                console.log(data)                setProducts(data);             } catch (error) {                console.error("Error fetching data:", error);            }        };        fetchData();    }, []);    if (products === null) {        return <div>Loading...</div>;     }    return (<div><h1>Product List</h1><ul>                {products.map((product, index) => (<li key={index}>{product.name}</li>                 ))}</ul></div>    );}

Error:

unhandled Runtime error
products.map is not a function

Why is products.map not a function? Please tell me why. console.log(data) I got API data but not display on browser