[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요,
1.
그랩 선생님 소스 코드와 동일하게 아래 작성한 index.js 소스 첨부하는데요,
실행하면,
1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이
에러가 발생 합니다.

이 에러는 어떻게 해결 할 수 있을까요?

--------
2. index.js 소스 아래에 작성 첨부 합니다.

import './index.css';
import axios from "axios";
import React from 'react';

function MainPage(){
    const [products, setProducts]=React.useState([]);
    React.useEffect(
        function(){
            axios.get("이곳에는 제 목 mock 서버 주소를 넣었습니다/products")
            .then(function(result){
                const products=result.data.products;
                setProducts(products);
            }).catch(function(error){
                console.error("에러 발생:",error);
            });
    },[]); return ( 
        <div>    
        <div id="header">
        <div id="header-area">
            <img src="../images/icons/logo.png" />
        </div>
    </div>
    <div id="body">
        <div id="banner">
            <img src="../images/banners/banner1.png" />
        </div>
        <h1>판매되는 상품들</h1>
        <div id="product-list">
            
            {
                 products.map(function(product, index){
            
                    return ( 

                <div className="product-card">
                
                <div>

                <img className="product-img" src={product.imageUrl} />
                </div>
            <div className="product-contents">
                <span className="product-name">{product.name}
                </span>
                <span className="product-price">{product.price}원
                </span>
                <span className="product-seller">
                    <img className="product-avatar" src="../images/icons/avatar.png" />
                    <span>{product.seller}</span>
                </span>
            </div>
            </div>

        ); 
                }) 
            }
        
        </div>
        </div>
    
    <div id="footer"></div>
    </div>
    );
}

export default MainPage;

그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다.

현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지
하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁드립니다.