Dropdown active item color does not change

Expected behavior Customize active dropdown item color.

Actual behavior Color does not change even with CSS.

Resources (screenshots, code snippets etc.)

    .dropdown {
  border: 1px solid $light-blue !important;
  border-radius: 3px;
}

.dropdown-menu {
  background-color: $white !important;
  border: 1px solid $light-blue !important;
  border-radius: 3px;
}

.dropdown-item {
  transition: all 0.3s ease-in;
  &:hover,
  &:focus,
  &:active {
    background-color: $third !important;
  }
}

.dropdown .dropdown-menu .dropdown-item:hover {
  color: $white !important;
  background-color: $third !important;
}
.dropdown .dropdown-menu .dropdown-item:active {
  color: $white !important;
  background-color: $third !important;
}
.dropdown .dropdown-menu .dropdown-item:focus {
  color: $white !important;
  background-color: $third !important;
}

<mdb-dropdown class="mt-3">
          <mdb-dropdown-toggle
            slot="toggle"
            size="sm"
            color="white"
            darkWaves
            >{{ reponsesTypes[currentIndex] }}</mdb-dropdown-toggle
          >
          <mdb-dropdown-menu>
            <mdb-dropdown-item
              class="dropdown-first"
              v-for="(rep, i) in reponsesTypes"
              :key="i"
              @click.native="pickRepType(i)"
              :active="i === currentIndex"
              >{{ rep }}</mdb-dropdown-item
            >
          </mdb-dropdown-menu>
        </mdb-dropdown>