Problem creating an L.Map instance with React-leaflet

Question

There is a map state defined as

const [map, setMap] = useState(null);

Here is the snippet which is supposed to initialize the map:

<MapContainer
  center={
    areaOfInterest.latitude ? [areaOfInterest.latitude, areaOfInterest.longitude] : [39, 22.5]
  }
  zoom={10}
  zoomControl={false}
  doubleClickZoom={false}
  style={{
    width: "98vw",
    height: "92vh",
    position: "fixed",
    marginTop: 5,
    left: 10,
  }}
  whenReady={(map) => {
    setMap(map);
    console.log("Map is initialized! It is : " , map);
  }}
>

It seems to do its job but in the end what is created is not an instance of L.Map. I verified that with typeOf and instanceOf log statements. It is a generic Object.

Any clues what I might be doing wrong? FYI, I am attempting to avoid react-leaflet hooks such as useMap and useMapEvent as they've given me a lot of trouble in the past.

Thanks in advance.

[EDIT]: After taking a look at the relevant documentation as pointed out by @BhaveshParvatkar, it is clear that instead of whenReady, I should use whenCreated which takes the Leaflet.Map as its parameter. However, it doesn't seem to run at all. I have some debug statements in it which never even trigger, and I assumed that a function called "whenCreated" would run when the map is first initialized. Any clues?