Search bar position on the map cannot be changed

[ahlag]

Hi

I'm having trouble with setting the location of the search bar. I have tried implementing with the default property - position set to the top right, however I do not see any changes reflected. When I checked the div, the position stays relative.

Map

Changes seen on the developer too;¥l.

.leaflet-control-geosearch.bar {
    position: relative;
    display: block;
    height: auto;
    width: 400px;
    margin: 10px auto 0;
    cursor: auto;
    z-index: 1000;
}

import React, { Component } from "react";

//Leaflet Imports
import {  Map, Marker, MapControl, Popup, withLeaflet  } from "react-leaflet";
import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import './leafletContainer.css';

//MapboxLayer Imports
import MapboxLayer from "./MapboxLayer/MapboxLayer";
import "./MapboxLayer/styles.css";

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

const MAPBOX_ACCESS_TOKEN = ""

class SearchMap extends MapControl {

    createLeafletElement() {
      return GeoSearchControl({
        provider: new OpenStreetMapProvider(),
        position: 'topright',
        style: 'bar',
        showMarker: true,
        showPopup: false,
        autoClose: true,
        retainZoomLevel: false,
        animateZoom: true,
        keepResult: false,
        searchLabel: 'search'
      });
    }
}

const position = [35.68162, 139.767179]; //Tokyo Station

export default class MapPage extends Component {
  state = {
    center: position,
    zoom: 15
  };

  render() {
    const SearchBar = withLeaflet(SearchMap);
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <SearchBar />
          <MapboxLayer
            accessToken={MAPBOX_ACCESS_TOKEN}
            attribution='<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
          />
          <Marker position={position}>
            <Popup>
              A pretty CSS3 popup.
              <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}