react中的目标容器不是DOM元素

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, World!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  const modalRoot = document.getElementById('modal-root');
  return ReactDOM.createPortal(children, modalRoot);
};

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <Modal>
        <p>This is a modal dialog.</p>
      </Modal>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));