I have the following component that is supposed to display a “No Promotions Available” card when the promotions array is either empty or contains invalid promotions. However, I am getting multiple empty cards when the response is an array of empty objects. I want to show only one “No Promotions Available” card if there are no valid promotions.

Here’s my current code:

import React from "react";
import { Card, CardMedia, Typography } from "@mui/material";

const Promotions = ({ promotions, translate, settings }) => {
  return (
    <Card sx={{ width: "100%", height: "100%", backgroundColor: "background.main" }}>
      {promotions.length === 0 || promotions.every((promotion) => !promotion.Id) ? (
        // Render the "No Promotions Available" card
        <Card
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            height: "300px",
            border: "1px solid rgba(255,255,255,0.2)",
            borderRadius: "12px",
            backgroundColor: "background.paper",
            boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
          }}
        >
          <Typography
            variant="h5"
            color="text.secondary"
            sx={{
              textAlign: "center",
              fontWeight: "bold",
              fontSize: { xs: "1.2rem", md: "1.5rem" },
              marginBottom: "1rem",
            }}
          >
            {translate("promotions.nopromotionabailable")}
          </Typography>
          <Typography
            variant="body1"
            color="text.secondary"
            sx={{
              textAlign: "center",
              fontSize: { xs: "0.9rem", md: "1.2rem" },
            }}
          >
            {translate("promotions.checkbacklater")}
          </Typography>
        </Card>
      ) : (
        // Render promotion cards if valid promotions exist
        promotions
          .filter((promotion) => promotion.Id)
          .map((promotion) => (
            <Card key={promotion.Id} sx={{ width: "100%", height: "100%", backgroundColor: "background.main" }}>
              <CardMedia
                component="img"
                alt={promotion.baslik || "Promotion Image"}
                height="152px"
                image={`${settings?.cdn_url}/${promotion.foto || "default-image.png"}`}
                sx={{
                  borderRadius: { xs: "0px !important", md: "0px !important", lg: ".4895rem .4895rem 0 0" },
                  objectFit: "cover !important",
                }}
              />
            </Card>
          ))
      )}
    </Card>
  );
};

export default Promotions;

Problem Details:
The promotions array is sometimes returned with 8 empty objects ([{}, {}, {}, {}, {}, {}, {}, {}]).
Even with these empty objects, I still see 8 “empty” promotion cards rendered.
I want to display only one “No Promotions Available” card if the promotions array is either empty or contains no valid promotions (i.e., objects without a valid Id).
Expected Behavior: When there are no valid promotions, only one “No Promotions Available” card should be displayed.
What I have tried:
Filtering the promotions array with .filter(promotion => promotion.Id) to exclude invalid promotions.
Using the condition promotions.length === 0 || promotions.every((promotion) => !promotion.Id) to check for empty or invalid data.
Network Response:
The network tab shows true in the response, but I still get empty cards in the UI.
The array contains empty objects, and I am not sure why they are still being rendered.
What I Need Help With:
How can I ensure that only one “No Promotions Available” card is displayed when there are no valid promotions in the array?