Mobile nav displaying clickable elements underneath dropdown

I have created a mobile nav following this tutorial on youtube https://www.youtube.com/watch?v=IF6k0uZuypA.

The nav dropdown as show in this picture is fully opaque and nothing behind dropdown shows through. However, only on the 'reviews list' page, where the sort by and add review elements are, the elements underneath the dropdown show and mess the mobile nav up, as shown here.

I am using React, MUI material icons https://mui.com/components/material-icons/ for the 'add' icon and MUI select for the sort and order by https://mui.com/components/selects/.

I have switched the add icon from MUI and replaced it with Fontawesome, but the issue still appears.

I have also tried setting the Z-index of the dropdown to 1 and the Z-index of the add icon underneath to -1, but this only seems to disable the add element under the dropdown.

I have also tried adding an 'opacity: 1' to the dropdown, this does not seem to change anything either.

// navbar css

* {
  margin: 0px;
}

:root {
  --bg: #242526;
  --bg-accent: #484a4d;
  --nav-size: 60px;
  --border: 1px solid #474a4d;
  --border-radius: 8px;
  --speed: 500ms;
  margin-top: 75px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
} 

a {
  /* color: #dadce1; */
  text-decoration: none;
}

.logo {
  color: #dadce1;
  margin: 0px;
  display: flex;
  align-items: center;
}

.navbar {
  height: var(--nav-size);
  background-color: var(--bg);
  padding: 0 1rem;
  border-bottom: var(--border);
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar-list {
  max-width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.nav-item {
  width: calc(var(--nav-size) * 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25px;
}

.icon-button {
  --button-size: calc(var(--nav-size) * 0.5);
  width: var(--button-size);
  height: var(--button-size);
  /* background-color: #484a4d;  */
  border-radius: 50%;
  padding: 5px;
  margin: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dropdown {
  position: absolute;
  z-index: 1;
  top: 56px;
  width: 300px;
  transform: translateX(-35%);
  background-color: rgb(16, 85, 211);
  border: var(--border);
  border-radius: var(--border-radius);
  padding: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 1;
}

.menu-item {
  height: 50px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  /* transition: background var(--speed);  */
  padding: 0.5rem;
}

 .menu-item:hover {
  background-color: #525357;
} 

.nav-profile-pic {
  max-width: 75px;
}

// review-list css

button, .sort-by {
  z-index: -1;
}