Use map's "invalidateSize" function:

const { height } = useSize(container);
useEffect(() => {
  if (map != null) {
    map.invalidateSize();
  }
}, [map, height]);

MapContainer gets:

width: 100%;
height: 100%;

No issue anymore (finally)

Use map's "invalidateSize" function:

const { height } = useSize(container);
useEffect(() => {
  if (map != null) {
    map.invalidateSize();
  }
}, [map, height]);

You can put this in a child of the map as explained in the other anser, or in the parent with map as a ref on MapContainer, it works either way.

MapContainer only needs static style:

width: 100%;
height: 100%;

No issue anymore (finally)