Есть компонент с использованием Portal React.Вопрос нужен ли он тут вообще, можно ли без него. Какую роль выполняет он именно в модальном окне?

import React, { Component } from "react";
import Portal from "./Portal";
import styled from "styled-components";
import { ImCross } from "react-icons/im"


// styles

const ModalOverlay = styled.div`
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
`

const ModalWindow = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFF;
  min-height: 200px;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
`
const ModalHeader = styled.div`
    padding: 10px 20px;
    min-height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
` 

const ModalBody = styled.div`
    padding: 10px 20px;
`
const ModalTitle = styled.div`
    font-weight: bold;
`
const ModalFooter = styled.div`
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
`
 
//class component

class Modal extends Component {


  render() {
    return(
     <>
       { this.props.isOpen && 
          <Portal> 
            <ModalOverlay onClick={this.outsideOfContent}>
                <ModalWindow onClick={e => e.stopPropagation()}>
                  <ModalHeader>
                    <ModalTitle>{this.props.header}</ModalTitle>
                    <ImCross 
                        style={{cursor: "pointer"}} 
                        onClick={this.props.closeButton}
                    />
                  </ModalHeader>
                  <ModalBody>
                    {this.props.children}
                  </ModalBody>
                  <ModalFooter>
                    <button 
                      style={{marginRight: '15px', cursor: 'pointer'}} 
                      onClick={this.props.onCancel} invert='true'>
                        Cancel
                    </button>
                    <button 
                      style={{cursor: 'pointer'}} 
                      onClick={this.props.onSubmit}>
                        Submit
                    </button>
                  </ModalFooter>
                </ModalWindow>
            </ModalOverlay>
          </Portal>
      } 
     </>
    )
  }
}

export default Modal;