Modal and Backdrop won't render on the page

Question

I am new to React and I was trying to implement a Modal and a Backdrop but it's not rendering properly. Please note that according to this code, the modal should render at all the times, I will be fixing this but it's not happening as of now, can someone guide me with this?

Modal.js file

import ReactDOM from "react-dom";

const Backdrop = (props) => {
  return <div className="backdrop"></div>;
};

const ModalOverlay = (props) => {
    <div className="modal">
        <div className="content"> {props.children} </div>
    </div>
};

const portalElement = document.getElementById('overlays');

const Modal = (props) => {
  return (
    <Fragment>
      {ReactDOM.createPortal(<Backdrop></Backdrop>, portalElement)}
      {ReactDOM.createPortal(<ModalOverlay> {props.children} </ModalOverlay>, portalElement)} 
    </Fragment>
  );
};

export default Modal;

Signup.js file (which is the modal)

import React from "react";
import Modal from "../Modal";
import "./Signup.css";
export default function Signup() {
  return (
    <Modal>
      <form className="form-dimensions">
        <div className="mb-4 custom-heading">SIGN UP </div>
        <div className="mb-4 custom-subheading">
          Create an account to continue
        </div>
        <div className="mb-3">
          <label
            htmlFor="exampleInputEmail1"
            className="form-label email-custom form-color"
          >
            Email
          </label>
          <input
            type="email"
            className="form-control"
            id="exampleInputEmail1"
            aria-describedby="emailHelp"
            placeholder="Enter your email"
          />
        </div>
        <div className="mb-3">
          <label
            htmlFor="exampleUsername"
            className="form-label email-custom form-color"
          >
            Username
          </label>
          <input
            type="text"
            className="form-control"
            id="exampleUsername"
            aria-describedby="emailHelp"
            placeholder="Enter your username"
          />
        </div>
        <div className="mb-3">
          <div className="label-inline">
            <label
              htmlFor="exampleInputPassword1"
              className="form-label form-color password-custom label-inline"
            >
              Password
            </label>
          </div>

          <input
            type="password"
            className="form-control"
            id="exampleInputPassword1"
            placeholder="Choose a strong password"
          />
        </div>

        <button type="submit" className="btn btn-primary">
          Continue
        </button>
        <div className="custom-ending">
          Already have an account? <span>Login →</span>
        </div>
      </form>
    </Modal>
  );
}

App.js file

import "./App.css";
import LoginPage from "./Login/LoginPage";
import NewPost from "./Posts/NewPost";
import PostList from "./Posts/PostList";
import { useState } from "react";
import Signup from "./Signup/Signup";

const expenses = [
  {
    name: "Lakshay Gupta",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "5mins ago",
    comments: "16 comments",
  },
  {
    name: "Naman Sukhija",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "1hour ago",
    comments: "24 comments",
  },
  {
    name: "William Harris",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "3mins ago",
    comments: "29 comments",
  },
];

function App() {
  const [isLoggedIn, setLogin] = useState(false)

  const submitLoginHandler = () => {
    setLogin(!isLoggedIn)

  };

  return (
    <div className="App">
      {!isLoggedIn && <LoginPage onSubmitLogin={submitLoginHandler}></LoginPage>}
      {isLoggedIn &&
        <div> 
          <Signup></Signup>
          <NewPost></NewPost>
          <PostList items={expenses}></PostList>{" "}
        </div>
      }
    </div>
  );
}

export default App;