How to add a button to the left of the geo search in react-leaflet React JS?

Question

I want to ask how to make UI button on left of geosearch, what are you using in ReactJS? and I use the reactjs map flyer and on the button later you can select all, Menu1 or Menu2 on the menu button. And I'll attach an example of the UI and coding I've been working on, need to be added?

example:

And attached is the code I've been working on, Search.js

import { useEffect, React } from 'react'
import { useMap } from 'react-leaflet'

import 'leaflet-easybutton/src/easy-button'
import 'leaflet-easybutton/src/easy-button.css'
import 'font-awesome/css/font-awesome.min.css'

import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch'

const Search = (props) => {
  const map = useMap()
  const provider = new OpenStreetMapProvider({
    params: {
      countrycodes: 'ID',
      addressdetails: 1,
      showMarker: true,
    },
  })

  useEffect(() => {
    const searchControl = new GeoSearchControl({
      position: 'topright',
      style: 'bar',
      svgHeight: 30,
      svgWidth: 30,
      shape: { r: '15', cx: '15', cy: '15' },
      style: {
        fill: '#73B0E1',
      },
      autoComplete: true,
      autoCompleteDelay: 250,
      maxMarkers: 0,
      animateZoom: false,
      autoClose: false,
    })

    map.addControl(searchControl)

    return () => map.removeControl(searchControl)
  }, [props])

  return null
}

export default Search

and, Index.js

import { useState, useEffect } from 'react'
import * as React from 'react'
import {
  LayersControl,
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  useMapEvents,
  ZoomControl,
} from 'react-leaflet'
import ListAccord from '../Component/ListAccord'
import L from 'leaflet'
import SearchControl from './SearchControl'
import './css/Map.css'
import 'leaflet-easybutton/src/easy-button.css'
import { OpenStreetMapProvider } from 'leaflet-geosearch'
import 'leaflet/dist/leaflet.css'

const prov = new OpenStreetMapProvider()
const { BaseLayer } = LayersControl

const icon = L.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
  shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png',
})

function LocationMarker() {
  const [position, setPosition] = useState(null)
  const map = useMapEvents({
    locationfound(e) {
      setPosition(e.latlng)
      map.flyTo(e.latlng, map.getZoom())
    },
  })

  return position === null ? null : (
    <Marker position={position} icon={icon}>
      <Popup>You are here</Popup>
    </Marker>
  )
}

export default function MyMap() {
  const [map, setMap] = useState(null)
  const [position, setPosition] = useState(null)

  const [isOpen, setIsOpen] = useState(false)

  useEffect(() => {
    if (!map) return

    L.easyButton('fa-map-marker', () => {
      map.locate().on('locationfound', function (e) {
        setPosition(e.latlng)
        map.flyTo(e.latlng, map.getZoom())
      })
    }).addTo(map)
  }, [map])

  return (
    <div className="flex ml-auto">
      <ListAccord />
      <div className="w-4/5">
        <MapContainer
          center={{ lat: -6.2, lng: 106.816666 }}
          zoom={20}
          style={{ height: '100vh' }}
          whenCreated={setMap}
        >
        
          <LayersControl position="topleft">              
            <BaseLayer checked name="OpenStreetMap">
              <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png "
              />
            </BaseLayer>
            
          </LayersControl>
          <LocationMarker />

          <SearchControl/>
        </MapContainer>
      </div>
    </div>
  )
}