Modal content not visible in React modal

I created a modal component in react, but it only shows the backdrop and not the main content of the modal. In the component tree, the component has a height of 0px. I increased the height but still, it is 0 only. This modal component works when used on some empty window, but not when there is already a lot of content on the window. Is it regarding the z-index?

Following is the code for Modal component:

import React, { useState } from 'react';
 function Pay(props) {
 return (
    <div>
     <div className="backdrop" onClick={props.onConfirm}></div>
     <div className="modal">
       <header className="header">
         <h2>Payment Section</h2>
       </header>
       <div className="content">
         <p>lorem ipsum dolor sit amet
            lorem ipsum dolor sit amet
            lorem ipsum doolr sit amet
         </p>
       </div>
       <footer className="action">
         <button onClick={props.onConfirm}>Pay</button>
       </footer>
     </div>
    </div>
  );
}
export default Pay;

The CSS file:

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal {
  position: fixed;
  top: 20vh;
  left: 5%;
  height:400px;
  width: 90%;
  background-color: white;
  padding: 1rem;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 3000;
}


.header {
  background: #4f005f;
  padding: 1rem;
}

.header h2 {
  margin: 0;
  color: white;
}

.content {
  padding: 1rem;
}

.actions {
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
}

This is where I call the Modal:

function Navigate(props){
  const [show,setShow]=useState(false);

  function pinch(){
    console.log("info from navigation");
    setShow(true);
  }
  function hidePay(){
    setShow(false);
  }
  return(

    <div className = "container1" >
      {show && <Pay onConfirm={hidePay}/>}
      <nav className="navbar navbar-expand-lg navbar-light">
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav ml-auto">
            <li className="nav-item doosri">
              <i className="fas fa-search fa-1x"></i>
            </li>

            <li className="nav-item doosri">
              <button onClick={pinch}><i className="fas fa-shopping-cart fa-1x"></i></button>
            </li>

          </ul>
        </div>
      </nav>
    </div>
  );
}