Setting leafletGeoSearch element active with .toggle() not working

Question

I'm working with react-leaflet map in NextJs and I'm trying to position the leafletGeoSearch bar to certain location after a button is pressed by togglin "active" to the search bar. When looking from the dev tools, it appears that the "active" class is not added to the leafletGeoSearchBar. Is there something I'm not seeing?

1. My initial (Working) CSS for the search bar

.leaflet-geosearch-bar {
  position: absolute;
  left: 20%;
  transform: translateX(-50%);
  top: 10px;
  width: 400px;
  z-index: 2000;
  border-radius: 4rem;
  transition: left 250ms ease;
}

2. CSS for when it is active (Not working)

.leaflet-geosearch-bar.active {
  left: 9%;
}

3. My JavaScript

const widenMap = () => {
    const mapSearchBar = document.querySelector('.leaflet-geosearch-bar')
    if (mapSearchBar) {
      console.log(mapSearchBar)
      mapSearchBar.classList.toggle('active');
    }
}

I can see from the console log that the element is found

<div class="geosearch leaflet-bar leaflet-control leaflet-control-geosearch leaflet-geosearch-bar active"><a class="leaflet-bar-part leaflet-bar-part-single" title="Enter address" href="#"></a></div>