Using react-leaflet-geosearch in React Leaflet: cannot read property addControl - reactjs

Question

Trying to add react-leaflet-geosearch to my leaflet map and I get the error:
Cannot read property 'addControl' of undefined
I do not know what the problem seems to be:
My code:
render() {
const prov = OpenStreetMapProvider();
const GeoSearchControlElement = SearchControl;
return (
<>
<MapContainer
style={{ height: "100%", width: "100%" }}
center={position}
zoom="0"
scrollWheelZoom={true}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://api.mapbox.com/styles/v1/<style>/tiles/256/{z}/{x}/{y}#2x?access_token=<token>"
/>
<Marker position={position} ></Marker>
<ChangeMapView coords={position} />
<GeoSearchControlElement
provider={prov}
showMarker={true}
showPopup={false}
popupFormat={({ query, result }) => result.label}
maxMarkers={3}
retainZoomLevel={false}
animateZoom={true}
autoClose={false}
searchLabel={"Enter address, please"}
keepResult={true}
/>
</MapContainer>
</>
);

Answer 1

You seem to use React Leaflet version 3 since you have a <MapContainer> component.
Unfortunately, the react-leaflet-geosearch plugin you are trying to integrate was made for React Leaflet version 2: https://github.com/TA-Geoforce/react-leaflet-geosearch/blob/master/package.json#L108
Due to the big API changes between these major versions, it is unlikely it will be compatible.

Answer 2

react-leaflet has been re-designed and useLeaflet hook is no longer available in v3 API which makes SearchControl component not compatible with v3
Until react-leaflet-geosearch compatibility with react-leaflet v3 is implemented, the following SearchControl could be considered instead (compatible with react-leaflet v3)
const SearchControl = (props) => {
const map = useMap();
useEffect(() => {
const searchControl = new GeoSearchControl({
provider: props.provider,
...props,
});
map.addControl(searchControl);
return () => map.removeControl(searchControl);
}, [props]);
return null;
};
Usage
class MapComponent extends React.Component {
render() {
const { position, zoom } = this.props;
const prov = OpenStreetMapProvider();
return (
<MapContainer center={position} zoom={zoom}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>
<SearchControl
provider={prov}
showMarker={true}
showPopup={false}
popupFormat={({ query, result }) => result.label}
maxMarkers={3}
retainZoomLevel={false}
animateZoom={true}
autoClose={false}
searchLabel={"Enter address, please"}
keepResult={true}
/>
</MapContainer>
);
}
}
Live demo