Почему отображается ошибка: Ошибка: целевой контейнер не является элементом DOM при создании ReactDOM.createPortal () и передаче переменной const

Question

В учебнике по ReactJS и контекстному API я пытался визуализировать модальный класс, создавая const внутри класса, расширенного React.Component

import React from 'react';
import ReactDOM from 'react-dom';
import './style.scss';
import { AppContext } from '../../context/appContext';

class Modal extends React.Component {
    render() {
        const node = (
            <div
                className="modal-container">
                <div className="modal">
                    <h1>modal</h1>
                </div>
            </div>
        );

        return ReactDOM.createPortal(node, document.getElementById('modal'));
    }
}

Modal.contextType = AppContext;

export default Modal;

И используя этот класс также в классе макетарасширенный от React.Component и использующий ReactDOM на

import Modal from '../modal';
<Modal />

Но когда я попытался отрендерить его, это дало мне ошибку, что созданный константный узел не является элементом DOM, также в уроке Iследуя этому, у него нет ошибок.

Error: Target container is not a DOM element.
createPortal$$1 [as createPortal]
> 17 |         return ReactDOM.createPortal(node, document.getElementById('modal'));
View compiled
▶ 16 stack frames were collapsed.