React TypeError: products.map is not a function

У меня странная проблема, я сделал приложение и pagination к нему, по сути сайт с товарами, если я запускаю приложение, то показывается ошибка "TypeError: products.map is not a function" если я коде добавляю debbuger или что угодно, в общем просто меняю код, не выключая приложение, то оно начинает работать правильно, если приложение обновить, то снова появляется ошибка, в чём дело? Возможно в products нет товаров, возможно мне стоит использовать componentDidMount таким образом я запущу эту функцию, только тогда, когда компонент отрисуется и данные уже придут по api, но тогда придётся переделывать компонент под классовый, я попробовал, но у меня появились сложности, может стоит использовать хук useEffect, я вообще ничего про него пока не знаю, так может кто-то подскажет дайрекшн куда двигаться в такое ситуации ЗДесь два компонента ProductComponent вызывается из ProductListing

const ProductComponent = (props) => {
//     // const products = useSelector((state) => state.allProducts.products);
    const products = props.currentproduct;
    debugger

    const renderList = products.map((product) => {
      const { id, title, image, price, category } = product;
    
      return (
          
        <div className="four wide column" key={id}>
            <br/>
          <Link to={`/product/${id}`}>
            <div className="ui link cards">
              <div className="card">
                <div className="image">
                  <img src={image} alt={title} />
                </div>
                <div className="content">
                  <div className="header">{title}</div>
                  <div className="meta price">$ {price}</div>
                  <div className="meta">{category}</div>
                </div>
              </div>
            </div>
          </Link>
        </div>
      );
    });
    return <>
        {renderList}
    </>;
  };

const ProductListing = () => {

    const products = useSelector((state) => state);
    const perPage = useSelector(state => state.allProducts.perPage);
    const currentPage = useSelector(state => state.allProducts.currentPage);
    let totalProduct = products.allProducts.products.length;
    const dispatch = useDispatch();
    let countPages;
    if(totalProduct) {
        countPages = Math.ceil(totalProduct / perPage);
    }


    
    let pages = [];

    const lastproductIndex = currentPage * perPage;
    const firstproductIndex = lastproductIndex - perPage;
    let currentproduct = '';
    debugger
    if(products.allProducts.products.length != 0){
        currentproduct = products.allProducts.products.slice(firstproductIndex, lastproductIndex);
    }


    function createPages(pages, pagesCount, currentPage) {
        if(pagesCount > 10) {
            if(currentPage > 5) {
                for (let i = currentPage-4; i <= currentPage+5; i++) {
                    pages.push(i)
                    if(i == pagesCount) break
                }
            }
            else {
                for (let i = 1; i <= 10; i++) {
                    pages.push(i)
                    if(i == pagesCount) break
                }
            }
        }  else {
            for (let i = 1; i <= pagesCount; i++) {
                pages.push(i)
            }
        }
    }
    createPages(pages, countPages, currentPage)


    productAPI.getProductAPI().then((response) =>{
        debugger
        dispatch(setProducts(response));
    })



    const onPageClick = (page) => {
        debugger
        dispatch(setCurrentPage(page))
    }


    let temp = pages.map((page) =>{
        return (<span onClick={() => {onPageClick(page)}} className={currentPage == page ? s.selectedPage :s.pagEl}>{page}</span>)
    })
    return (
        <>
            <div className={s.myContainer}>
                <div className={s.pag}>
                     {temp}
                </div>
                <div className={s.mainBlock}>
                    <ProductComponent currentproduct={currentproduct}/>
                </div>
            </div>
        </>
    )
}
export default ProductListing;