mobile devices are not rending components created by Array.map() function, but it does render perfectly on laptops and desktops

Question

I'm new to React and I hope somebody helps me understand how to solve this problem. In my code below I'm retrieving product data from AliExpress's Dropshipping API; when I make the API call it returns an array with a set of information about 20 different products. from there, I want to use the map function to render a component that I've called "ProductCard" and pass the data points from the API call into the component as props. I believe this is what I've done in my code below, so when I check my app on a laptop or desktop device the code works as expected, but when I check my app on a mobile device the "ProductCard" component that the "productDisplay" function is responsible for creating dynamically does not render. What confuses me is that I only have this problem with small devices like mobile phones. Otherwise, my code works the way I want it to on larger devices like laptops or desktops. at first, I thought maybe there was something wrong with my phone, so I tried looking at it from other people's cell phones to see if the ProductCard component would render but it didn't.

I don't want to have to manually create the ProductCard components whenever I need to pull data from an API. so, can somebody please help me understand what I'm doing wrong and how to fix it? so that my ProductCard component can render properly on all devices, and can you please provide code examples in functional components instead of class components?

import SectionTitle from "../Base/SectionTitle";
import axios from "axios";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import ProductCard from "./ProductCard";

function EcommerceMarket() {
    const [aliExpressData, setAliExpressData] = useState();

    useEffect(() => {
        let pageIsMounted = true;
        if (pageIsMounted) {
            let url;
            if (process.env.NODE_ENV === "production") {
                url = `${process.env.REACT_APP_PRODUCTION_URL}/guest/e-commerce-service`;
            } else {
                url = `${process.env.REACT_APP_DEV_URL}/guest/e-commerce-service`;
            }

            const options = {
                method: "GET",
                url: url
            };

            axios
                .request(options)
                .then((response) => {
                    const marketData = response.data.content;
                    // console.log(marketData);
                    const filteredData = marketData.filter((product) => {
                        if (product.image) {
                            const targetProduct = product;
                            return targetProduct;
                        }
                    });

                    return filteredData;
                })
                .then((filteredData) => {
                    //console.log(filteredData);
                    setAliExpressData(filteredData);
                })
                .catch((error) => {
                    console.error(error);
                });
        }
        return () => {
            pageIsMounted = false;
        };
    }, []);

    const productDisplay = () => {
        if (aliExpressData) {           
            const updatedCards = aliExpressData.map((product) => {              
                const id = product.productId;
                const productImage = product.image.imgUrl;
                const productTitle = product.title.displayTitle;
                const price = `$ ${product.prices.salePrice.minPrice}`;
                return <ProductCard key={id} image={productImage} title={productTitle} productid={id} price={price} />;
            });

            return updatedCards;
        }
    };

    return (
        <div className="e-commerce">
            <SectionTitle title="e-commerce market" />
            <Container className="e-commerce__content-container" fluid>
                <Row className="e-commerce__row">
                    <Col className="e-commerce__product-display" xs={{ span: 12, order: 2 }} lg={{ span: 8, order: 1 }}>
                        {productDisplay()}
                    </Col>
                    <Col className="e-commerce__service-explanation" xs={{ span: 12, order: 1 }} lg={{ span: 4, order: 2 }}>
                        <h2 className="e-commerce__service-explanation__title">service description</h2>
                        <p className="e-commerce__Product-description">
                            <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis optio sed reprehenderit officiis voluptatum fugiat quas iure facere voluptas repudiandae odio distinctio itaque animi omnis doloremque, delectus tempora. Nam, iste!</span>
                            <span>Molestias cupiditate itaque accusantium quisquam iusto placeat ipsa facere, molestiae perferendis, magni et? Deleniti quod illum id consectetur eius dolor nesciunt delectus recusandae modi, commodi ullam odit cumque sit maiores.</span>
                        </p>
                        <p className="e-commerce__Product-description">
                            <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam, earum autem unde dolore enim alias soluta cum harum at quibusdam, quam in perferendis distinctio ducimus libero quos impedit officiis itaque.</span>
                            <span>Necessitatibus vero sequi modi officia praesentium delectus quibusdam architecto quas unde. Inventore, officiis animi officia sit consequuntur accusamus omnis cupiditate assumenda voluptatum consequatur numquam accusantium! Quos nulla tenetur voluptatibus ipsum.</span>
                        </p>
                        <p className="e-commerce__Product-description">
                            <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur laboriosam maxime corrupti vitae nostrum, fugiat, iure, blanditiis harum exercitationem neque esse consectetur est quibusdam excepturi repudiandae mollitia voluptates qui repellendus?</span>
                            <span>Consequuntur necessitatibus, quidem sint, delectus expedita dolores dicta non modi est saepe distinctio debitis ut obcaecati animi omnis corrupti numquam! Quod iure quaerat, vero odit eveniet dolore ratione. Nam, laborum.</span>
                        </p>
                    </Col>
                </Row>
            </Container>
        </div>
    );
}

export default EcommerceMarket;