TypeError: e.map is not a function in react when deploy to heroku

I'm having error TypeError: e.map is not a function when I deployed to heroku:

Here is my Products.jsx:

    import React, { useEffect, useState } from "react";
    import axios from "axios";
    import styled from "styled-components";
    import media from "../../Styles/media";
    import TopProducts from "./TopProducts";
    import Pagination from "../Pagination";
    
    const Wrapper = styled.div`
      margin: 50px 0;
      ${media.tablet`
      margin: 10px 0;
      `};
    `;
    
    const Tops = (props) => {
      const [loading, setLoading] = useState(false);
      const [currentPage, setCurrentPage] = useState(1);
      const [itemsPerPage] = useState(9);
    
      const [products, setProducts] = useState([]);
      useEffect(() => {
        const fetchItems = async () => {
          setLoading(true);
          const res = await axios.get("/api/products");
          setProducts(res.data);
          setLoading(false);
        };
        document.title = `Shop - The Beuter`;
        fetchItems();
      }, [props]);
    
...
    
    export default Tops;

It's telling me at cc (Products.jsx:82) which is this line {products.map((product, i) => (...)

How can I fix this error? When i try on my localhost it work fine and no error

Update add .map function:

return (
    <ShopWrapper>
        <ListItems>
            {products.map((product, i) => (
                <Item key={i}>
                    <ItemLink to={`/product/${product.title_url}`}>
                        <ItemImage src={product.img_url1} />
                        <ItemTitle> {product.title} </ItemTitle>
                        <ItemPrice>
                            {nf.format(product.price)}
                            vnd
                        </ItemPrice>
                    </ItemLink>
                </Item>
            ))}
        </ListItems>
    </ShopWrapper>
);

It's causing error at products.map

Updated code from backend: Here is my server.js from backend:

const express = require("express"),
    app = express(),
    cors = require("cors"),
    port = process.env.PORT || 8000,
    db = "beuter",
    path = require("path"),
    server = app.listen(port, () => console.log(`Listening to on port ${port}`));

app.use(cors());
app.use(express.json());

if (process.env.NODE_ENV === "production") {
    app.use(express.static('beuter/build'))

    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'beuter', 'build', 'index.html'));
    })
}
require("./server/config/database.config")(db);
require("./server/routes/product.route")(app);

Here is my project github if you want to look over it: https://github.com/nathannewyen/the-beuter

I Really appreciate it

update my route.js:

const product = require("../controllers/product.controller");

module.exports = (app) => {

    app.get("/api/products", product.index);

    // Create a product
    app.post("/api/products", product.create);

    // Get one product by title_url
    app.get("/api/products/:title_url", product.show_title_url)

    // Delete a product
    app.delete("/api/products/:id", product.deleteProduct)

    //Edit a product
    app.put("/api/products/:id", product.update)

};