React: Error Modal popup | Created div's in Index.html

 
 Modal popups is hidden by default,(coded inside nested div's ) so instead of using it in root div, 
created new divs, in index.html in public folder

Step 1 :In react project: in index.html added below lines

 <div id="backdrop-root"></div>

    <div id="modal-root"></div>

    <div id="root"></div>

ErrorModal code: 
pushing to above new created div's

import React from "react";

import ReactDOM from "react-dom";

import Card from "./Card";

import Button from "./Button";

import classes from "./ErrorModal.module.css";

const Backdrop = (props) => {

  return <div className={classes.backdrop} onClick={props.onConfirm} />;

};

const ModalOverlay = (props) => {

  return (

    <Card className={classes.modal}>

      <header className={classes.header}>

        <h2>{props.title}</h2>

      </header>

      <div className={classes.content}>

        <p>{props.message}</p>

      </div>

      <footer className={classes.actions}>

        <Button onClick={props.onConfirm}>Okay</Button>

      </footer>

    </Card>

  );

};

const ErrorModal = (props) => {

  return (

    <React.Fragment>

      /* imprt reactdom , it exists in package.json*/

      {ReactDOM.createPortal(

        <Backdrop onConfirm={props.onConfirm} />,

        document.getElementById("backdrop-root")

      )}

      {/* above   <Backdrop onConfirm={props.on is for closing popup oon clicking other than popup */}

      {ReactDOM.createPortal(

        <ModalOverlay

          title={props.title}

          message={props.message}

          onConfirm={props.onConfirm}

        />,

        document.getElementById("modal-root")

      )}

    </React.Fragment>

  );

};

export default ErrorModal;

Old code ErrorModal.js

import React from 'react';

import Card from '../Card';

import Button from '../Button';

import classes from './ErrorModal.module.css';

const ErrorModal = (props) => {

  return (

    <div>

      <div className={classes.backdrop} onClick={props.onConfirm} />

      <Card className={classes.modal}>

        <header className={classes.header}>

          <h2>{props.title}</h2>

        </header>

        <div className={classes.content}>

          <p>{props.message}</p>

        </div>

        <footer className={classes.actions}>

          <Button onClick={props.onConfirm}>Okay</Button>

        </footer>

      </Card>

    </div>

  );

};

export default ErrorModal;