react-leaflet and react-leaflet-search integration

Question

I would like to know how to integrate the react-leaflet and react-leaflet-search.

Cause i have followed the guideline but still not rendering the osm search.

This is my react-leaflet and react-leaflet-searche versions.

"react-leaflet": "^4.2.1",

"react-leaflet-draw": "^0.20.4",

"react-leaflet-search": "^2.0.1",

import React from 'react'

import { MapContainer, TileLayer, LayersControl, FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';

import { SearchControl, OpenStreetMapProvider } from 'react-leaflet-search';
import 'react-leaflet-search/lib/react-leaflet-search.css';

function CreateField() {

    const provider = new OpenStreetMapProvider();

    const _onCreate = (e) => {

        if (!isDrawing) {
            return;
        }
        
        const { layerType, layer } = e;
        if (layerType === 'polygon') {
            const { _leaflet_id } = layer;
        
            // Convert LatLng objects to [lon, lat] array
            const latlngs = layer.getLatLngs()[0].map(({ lat, lng }) => [lng, lat]);
        
            // Ensure closure of the ring
            latlngs.push(latlngs[0]);
        
            setMapLayers([{ id: _leaflet_id, latlngs }]);
            setIsDrawing(false);
        }
        };
    
        const _onEdited = (e) => {
        const {
            layers: { _layers },
        } = e;
        
        Object.values(_layers).map(({ _leaflet_id, editing }) => {
            const latlngs = editing.latlngs[0].map(({ lat, lng }) => [lng, lat]);
        
            // Ensure closure of the ring
            latlngs.push(latlngs[0]);
        
            const geoJSON = {
            type: "Polygon",
            coordinates: [latlngs],
            };
        
            setMapLayers((layers) =>
            layers.map((l) =>
                l.id === _leaflet_id
                ? { ...l, geometry: geoJSON }
                : l
            )
            );
        });
        };
        
        const _onDeleted = (e) => {
        const {
            layers: { _layers },
        } = e;
        
        Object.values(_layers).map(({ _leaflet_id }) => {
            setMapLayers((layers) => layers.filter((l) => l.id !== _leaflet_id));
        });
        
        setIsDrawing(true);
        };

    return (
        <div>            
            <MapContainer center={[0, 0]} zoom={2} style={{ height: '500px', width: '100%', margin: 0, padding: 0 }}>
                <LayersControl position="topright">
                    <LayersControl.BaseLayer checked name="OpenStreetMap">
                        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' />
                    </LayersControl.BaseLayer>
                    <LayersControl.BaseLayer checked name="Satellite">
                        <TileLayer url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" attribution='&copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' />
                    </LayersControl.BaseLayer>
                </LayersControl>
                <FeatureGroup>
                    <EditControl
                        position="topleft"
                        draw={{
                        polygon: isDrawing, // Enable drawing only if isDrawing is true
                        rectangle: false,
                        polyline: false,
                        circle: false,
                        marker: false,
                        circlemarker: false,
                        }}
                        onCreated={_onCreate}
                        onEdited={_onEdited}
                        onDeleted={_onDeleted}
                    />
                </FeatureGroup>
                <FeatureGroup>
                    <SearchControl
                        provider={provider}
                        position="topright"
                        searchLabel="Enter address"
                        showMarker
                        showPopup
                        markerIcon={<div style={{ backgroundColor: 'red' }}>+</div>}
                        maxMarkers={3}
                        retainZoomLevel
                        animateZoom
                        autoClose
                        search={[]}
                        zoom={13}
                    />
                </FeatureGroup>
            </MapContainer>
        </div>
    )
}

export default CreateField