مشكلة في جلب البيانات: TypeError: Cannot read property 'map' of undefined في React

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ProductList() {
    // السطر المشتبه فيه: القيمة الابتدائية مش معرفة كـ Array
    const [products, setProducts] = useState(); 

    useEffect(() => {
        axios.get('https://api.example.com/products')
            .then(response => {
                setProducts(response.data);
            })
            .catch(error => {
                console.error("حصلت مشكلة في الجلب:", error);
            });
    }, []);

    return (
        <div className="product-container">
            <h2>قائمة المنتجات</h2>
            <ul>
                {/* هنا الابلكيشن بيضرب لأن products بـ undefined في أول Render */}
                {products.map(item => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
}

export default ProductList;