Leaflet-control-geocoder: Cant get markers to render via Leaflet-control-geocoder reverse method - leaflet

Question

I have a collection of latlng objects which also have elevation data. I'm mapping over this array and trying to pass that latlng object as a prop to this component i.e. <LeafletReverseGeocoding /> I created. What I want is to take that latlng I passed in and have the .reverse return the closet street near that latlng object. As some of those coordinates originally fall on buildings or non streets.
My hope is the elevation should be about the same to the original latlng.
In Marker component:
{topographyData.map((topoObject, index) => {
console.log("topoObject ", topoObject);
return (
<LeafletReverseGeocoding latlng={topoObject.latlng} key={index} />
);
})}
I'm following the docs here
Code for LeafletReverseGeocoding component:
import L from "leaflet";
import { useEffect } from "react";
import { useMap } from "react-leaflet";
import "leaflet-control-geocoder/dist/Control.Geocoder.js";
export function LeafletReverseGeocoding({ latlng }) {
const map = useMap();
console.log("latlng ", latlng);
useEffect(() => {
var geocoder = L.Control.Geocoder.nominatim();
let marker;
console.log("geocoder ", geocoder);
map.on("load", () => {
geocoder.reverse(
latlng,
map.options.crs.scale(map.getZoom()),
(results) => {
var r = results[0];
if (r) {
if (marker) {
marker
.setLatLng(r.center)
.setPopupContent(r.html || r.name)
.openPopup();
} else {
marker = L.marker(r.center)
.bindPopup(r.name)
.addTo(map)
.openPopup();
}
}
}
);
});
}, []);
return null;
}
Following this yields no markers. What am I missing.