섹션3 목록처리(2) - 동일페이지 클릭 처리 부분에서 오류가 나서 문의드립니다.

import React from "react";


// 게시판 아래 페이징 처리 1페이지 2페이지 3페이지 <<prev page, next page>>
function PageComponent({serverData, movePage}) {

    //serverData.prev, pageNumList, next
    return (
        <div className='m-6 flex justify-center'>
            
            {/* 이전 데이터가 있다면 이전페이지로 이동할 수 있게끔 만드는 기능*/}
            {serverData.prev ?
                <div 
                    className='m-2 p-2 w-16 text-center font-bold text-blue-400'
                    onClick={ () => movePage({page:serverData.prevPage} )}
                >
                    Prev 
                </div> : <></>
            }
        
            {/* 페이징 번호 순서대로 출력 */}
            {serverData.pageNumList.map(pageNum =>
                <div 
                    key={pageNum}
                    className={ `m-2 p-2 w-12 text-center rounded shadow-md text-white
                    ${serverData.current === pageNum? 'bg-grev-500':'bg-blue-400'}`}
                    onClick={ () => movePage( {page:pageNum}) }>
                    {pageNum}
                </div>
            )}

            {/* 마지막 next */}
            {serverData.next ?
                <div 
                    className='m-2 p-2 w-16 text-center font-bold text-blue-400'
                    onClick={ () => movePage( {page:serverData.nextPage} )}>
                    Next
                </div> : <></>
            }
        </div>   
    );
}

export default PageComponent;

이렇게 입력을 똑같이 했는데 

Prev </div> : <></> 이쪽 코드에서 

아래 에러메세지가 발생을 하는데요 저만 이런건가요 ㅠ 서버쪽은 문제가 아니라고 구글링 해보니까 그러는데 여기서 뭐가 문제인지 도저히 모르겠습니다 ㅠ

Uncaught TypeError: Cannot read properties of undefined (reading 'map') 

{serverData.pageNumList && serverData.pageNumList.map(pageNum =>
    <div key={pageNum} ...>
        {pageNum}
    </div>
)}