z-index not properly working in all components in reactjs

Question

Photo of the problem

I don't know why but I've search all the z-index properties and positioning to make it work but it doesn't I follow all the different kind of tricks to make z-index work, also in the image this is the only page where my menu bar in the back of the component even I index my menu bar to be 99999.

Here's my code of SASS:

  .menu {
    cursor: pointer;
    position: relative;
    .menus {
      position: absolute;
      z-index: 999 !important;
      padding: 0.5rem;
      top: 120%;
      right: 0;
      background-color: white;
      border-radius: 0 0 5px 5px;
      width: 16rem;
      height: 850%;
      -webkit-box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 2px 0 0 rgba(0, 0, 0, 0.2);
      div {
        transition: all ease-in-out 200ms;
        margin: 1.2rem 0.5rem;
        &:hover {
          background-color: rgb(240, 239, 239);
          border-radius: 5px;
          padding: 3px 3px;
        }
        a {
          font-size: 16px;
          font-family: 'Montserrat';
          font-weight: 600;

          .icon {
            margin-right: 7px;
          }
        }
      }
    }
  }

Here's my Code in JSX:

{currentUser && [
          <li>
            <strong
              onClick={() => showMenu()}
              onMouseEnter={() => showMenu()}
              className="camel-case menu"
              style={{
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            >
              {displayName} <TiArrowSortedDown size={18} />
              <div
                className="menus"
                onMouseLeave={() => hideMenu()}
                onMouseEnter={() => showMenu()}
              >
                <div className="settings">
                  <Link to="/dashboard">
                    <BsFillPersonFill className="icon" />
                    Profile
                  </Link>
                </div>
                <div className="settings">
                  <Link to="/payment">
                    <MdPayment className="icon" />
                    Payment
                  </Link>
                </div>
                <div className="settings">
                  <Link to="/cart">
                    <AiOutlineShoppingCart className="icon" />
                    Cart
                  </Link>
                </div>
                <div className="settings">
                  <Link to="/dashboard">
                    <MdHistory className="icon" />
                    Order History
                  </Link>
                </div>
                <div className="settings">
                  <Link onClick={() => signOut()}>
                    <RiLogoutBoxRLine className="icon" />
                    Log Out
                  </Link>
                </div>
              </div>
            </strong>
          </li>,
        ]}