Ошибка реакции: целевой контейнер не является элементом DOM: получен при загрузке модальной формы

Question

Я работаю над приложением для корзины покупок, используя ReactJS и Context-API, и до сих пор я добился этого:

1. загрузить мои продукты из Firebase
2. Добавить товар в корзину

Следующим шагом является отображение содержимого корзины при загрузке модальной формы, когда пользователь нажимает на правильный значок, но в этой части я получаю эту ошибку:

Целевой контейнер не является элементом DOM

Это код от FoodOrder, один из самых важных:

      import React, { useState } from "react";
import Header from "./Layout/Header";
import Meals from "./Meals/Meals";
import Cart from "./Cart/Cart";
import CartProvider from "./store/CartProvider";

const FoodOrder = () => {
  const [cartIsShown, setCartIsShown] = useState(false);

  const showCartHandler = () => {
    setCartIsShown(true);
  };

  const hideCartHandler = () => {
    setCartIsShown(false);
  };

  return (
    <CartProvider>
      {cartIsShown && <Cart onClose={hideCartHandler} />}
      <Header onShowCart={showCartHandler} />
      <main>
        <Meals />
      </main>
    </CartProvider>
  );
};

export default FoodOrder;

Компонент Header.js подобен контейнеру, который передает реквизиты в HeaderCartButton, приведенный ниже код взят из Header.js:

      import React, { Fragment } from "react";
import HeaderCartButton from "./HeaderCartButton";
import mealsImage from "../assets/banner.jpg";
import classes from "./Header.module.css";

const Header = (props) => {
  return (
    <Fragment>
      <header className={classes.header}>
          <h1>Let's order pupusas</h1>
          <HeaderCartButton onClick={props.onShowCart} />
          </header>
          <div className={classes['main-image']}>
              <img src={mealsImage} alt="all you can eat pupusas" />
              </div>
    </Fragment>
  );
};


export default Header;

А это код из HeaderCartButton.js:

      import { useContext, useEffect, useState } from "react";
import CartIcon from "../Cart/CartIcon";
import CartContext from "../store/cart-context";
import classes from "./HeaderCartButton.module.css";

const HeaderCartButton = (props) => {
    const [btnIsHighlighted, setBtnIsHighlighted] = useState(false);
    const cartCtx = useContext(CartContext);

    const { items } = cartCtx;

    const numberOfCartItems = items.reduce((curNumber, item) => {
        return curNumber + item.amount;
    }, 0);

    const btnClasses = `${classes.button} ${
        btnIsHighlighted ? classes.bump : ""
    }`;

    useEffect(() => {
        if(items.length === 0){
            return;
        }
        setBtnIsHighlighted(true);
        const timer = setTimeout(() => {
            setBtnIsHighlighted(false);
        }, 300);
        return() => {
            clearTimeout(timer);
        }
    }, [items]);

    return(
        <button className={btnClasses} onClick={props.onClick}>
            <span className={classes.icon}>
                <CartIcon />
            </span>
            <span>Your Shopping</span>
            <span className={classes.badge}>{numberOfCartItems}</span>
        </button>
    );
}

export default HeaderCartButton;

Наконец, это исходный код компонента Modal.js:

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

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

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

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

const Modal = (props) => {
  return (
    <React.Fragment>
      {ReactDOM.createPortal(
        <Backdrop onClose={props.onClose} />,
        portalElement
      )}
      {ReactDOM.createPortal(
        <ModalOverLay>{props.children}</ModalOverLay>,
        portalElement
      )}
    </React.Fragment>
  );
};

export default Modal;

В качестве последнего комментария я не получаю сообщение об ошибке ни в основном веб-браузере, ни в моей консоли vscode, мне пришлось проверить инструменты разработки, чтобы выяснить, что происходит.

Итак, какие-либо подсказки, как отладить эту ошибку? что мне не хватает?

Большое спасибо