how do i put the popup in front of other elements in react

I have a popup that opens when the Add New Device button in the navbar is pressed. I'm printing the devices saved from this popup in produtcs page. However, popup lags behind the cards created for each product. I want you to appear first. How can I fix?

App.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Navbar.js

import React, { useState } from 'react'
import AddProducts from './AddProduct';
import './components.css'
import 'reactjs-popup/dist/index.css';

function Navbar() {

    const [openPopup, setOpenPopup] = useState(false);

    return (
        <div>
            <nav className="navbar bg-light">
                <div className="container-fluid">
                    <div className='justify-content-start'>
                        <a className="navbar-brand">Products</a>
                        <button className="btn btn-outline-danger btn-sm" onClick={() => setOpenPopup(true)}>+ Add New</button>
                        <AddProducts trigger={openPopup} setTrigger={setOpenPopup}></AddProducts>
                    </div>
                    <form className="d-flex" role="search">
                        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                        <button className="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </nav>
        </div >
    )
}

export default Navbar

AddProducts.js (popup)

import React, { useState } from 'react'
import './components.css';
import { BiX } from "react-icons/bi";
import { addDoc, collection } from "firebase/firestore"
import { db } from "../firebase-config";
import 'reactjs-popup/dist/index.css';


const AddProducts = (props) => {

    const [name, setName] = useState("");
    const [coordinates, setCoordinates] = useState("");
    const [format, setFormat] = useState();

    const productsCollectionRef = collection(db, "products");

    const add = async (e) => {
        e.preventDefault();
        await addDoc(productsCollectionRef, { name: name, coordinates: coordinates, format: format });
    };


    return (props.trigger) ? (
        <div className="popup">
            <div className="popupTop ">
                <div className="row">
                    <p className='col-md-10'>Add New Device</p>
                    <p className=" col-md-2 closeBtn" onClick={() => props.setTrigger(false)}>
                        <BiX size="20" color="black"></BiX>
                    </p>
                    {props.children}
                </div>
            </div>
            <div className="popupContent">
                <form autoComplete='off' className="form-group"
                    onSubmit={add}>
                    <div className="mb-3 inputAP">
                        <label className="form-label">Name *</label>
                        <input className="form-control"
                            required
                            onChange={(e) => setName(e.target.value)} value={name} />
                    </div>
                    <div className="mb-3 inputAP">
                        <label className="form-label">Coordinates *</label>
                        <input className="form-control"
                            required
                            onChange={(e) => setCoordinates(e.target.value)} value={coordinates} />
                    </div>
                    <div className="mb-3">
                        <label className="form-label">Format *</label>
                        <div className="form-check">
                            <input className="form-check-input" type="radio" name="format" value={"16:9"}
                                onChange={(e) => setFormat(e.target.value)} /> 16:9
                        </div>
                        <div className="form-check">
                            <input className="form-check-input" type="radio" name="format" value={"4:3"}
                                onChange={(e) => setFormat(e.target.value)} /> 4:3
                        </div>
                    </div>
                </form>
                <div className="mb-3">
                <button className="btn btn-success" onClick={add}>Submit</button>
                </div>
            <开发者_开发百科/div>
        </div>


    ) : "";
}

export default AddProducts;

Products.js

import React, { useEffect, useState } from 'react'
import { getDocs, collection, doc, deleteDoc } from 'firebase/firestore'
import { db } from '../firebase-config';
import './components.css';
import { BiTrash, BiDesktop } from "react-icons/bi";

function Products() {

  const [listProducts, setListProducts] = useState([]);
  const productsCollectionRef = collection(db, "products");

  useEffect(() => {
    const getProducts = async () => {
      const data = await getDocs(productsCollectionRef);
      setListProducts(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };
    getProducts();
  });

  const deleteProduct = async (id) => {
    const productDoc = doc(db, "products", id)
    await deleteDoc(productDoc);
  };

  return (
    <div className="container productList ">
      <div className="row productRow">
        {listProducts.map((product) => {
          return (
            <div class="card col-md-3 mb-3 mx-2 border-secondary ">
              <div class="card-header bg-transparent border-secondary">{product.name}</div>
              <div class="card-body text-secondary">
                <p class="card-text">Coordinates: {product.coordinates}</p>
              </div>
              <div class="card-footer bg-transparent border-secondary">
                <div className="formatProduct">
                  <p className='formatIcon formatItem mx-2'><BiDesktop size="20" color="black"></BiDesktop></p>
                  <p className="card-text formatItem">{product.format}</p>
                </div>
                <div className="deleteProduct">
                  <p onClick={() => { deleteProduct(product.id) }}><BiTrash size="20" color="red"></BiTrash></p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div >
  );
}

export default Products

This is how it looks now on the back of the cards.