Bootstrap dropmenu hovering only changing half the width of the option background when hovered on firefox

I'm working on a project on Angular 18 with Bootstrap 5.3 and I'm currently struggling with hovering in menu here is an example:

In Firefox, as you can see, it only change half the background:

Here is the markup for that part:

<h5>Starter Equipment Id</h5>

<select formControlName="StarterEquipmentId" class="form-select ">
  <option *ngFor="let starterEquipement of starterEquipementIdOptions" [value]="starterEquipement.value"> {{starterEquipement.label}}</option>
</select>

But in Edge it doesn't encounter such issue - expected behavior: hovering changing the full tile of dropdown menu:

However the bootstrap doc state this:

"Custom menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the ’s initial appearance and cannot modify the s due to browser limitations."

So I guess I'm ducked but I wanted to know if there is a known work around through bootstrap, and if not what kind of add-on can I use to not make that project a 30min download with npm when I'll take this project from somewhere else?

Edit: I tried adding into the CSS:

.navLi:hover .dropdown-toggle {
      color:black;
}

.navLi:hover {
   background-color:white;
}

Without success, and this didn't work either:

option:hover {
    background-color: #636363;
    width: 100%;
}
 
.form-select:hover {
    background-color: #636363;
    width: 100%;
}