After I import a new component in app.js the app renders nothing on the browser and does not even get an error. The new component is cart.js. Also sharing the modal.js code because it's used in the cart component as a wrapper. Also when I remove the Cart component from App JS, the app runs fine.

App JS:

    import Header from "./components/Layout/Header";
    import Meals from "./components/Meals/Meals";
    import Cart from "./components/Cart/Cart";
    
    function App() {
      return (
        <>
          <Cart />
          <Header />
          <main>
            <Meals />
          </main>
        </>
      );
    }
    
    export default App;

Cart.js file:

import Modal from "../UI/Modal";
import classes from "./Cart.module.css";

const Cart = (props) => {
  const cartItems = (
    <ul className={classes["cart-items"]}>
      {[
        {
          id: "c1",
          name: "Biryani",
          Amount: 2,
          price: 250,
        },
      ].map((item) => (
        <li>{item.name}</li>
      ))}
    </ul>
  );

  return (
    <>
      <Modal>
        {cartItems}
        <div className={classes.total}>
          <span>Total Amount</span>
          <span>200</span>
        </div>
        <div className={classes.actions}>
          <button className={classes["button--alt"]}>Close</button>
          <button className={classes.button}>Order</button>
        </div>
      </Modal>
    </>
  );
};

export default Cart; 

Modal.js is used as a portal for the Cart component and ID "overlays" is coming from the index.html used as a portal.

import React from "react";
import ReactDOM from "react-dom";
import classes from "./Modal.module.css";

const Backdrop = (props) => {
  return <div className={classes.backdrop}></div>;
};

const ModalOverlay = (props) => {
  <div className={classes.modal}>
    <div className={classes.content}>{props.children}</div>;
  </div>;
};

const portalEl = document.getElementById("overlays");

const Modal = (props) => {
  return (
    <>
      {ReactDOM.createPortal(<Backdrop />, portalEl)}
      {ReactDOM.createPortal(
        <ModalOverlay>{props.childres}</ModalOverlay>,
        portalEl
      )}
    </>
  );
};

export default Modal;