Leaflet Map not rendering Tiles correctly

I'm building a map with react-leaflet and in the first load sometimes most of the tiles aren't visualized as you can see below:

I've gone through several stack overflow question and what I've done is:

• Include the leaflet CSS and JS in the index.html file
• Include the leaflet CSS directly in the component file
• A useEffect that runs on every render and calls the method map.invalidateSize() taken by the useMap() hook
• A useEffect that runs on first render and calls the method map.invalidateSize() taken by the useMap() hook
• Use the useMapEvents() hook and when the maps load run the map.invalidateSize() method taken by the useMap() hook

Whenever I resize the browser window Leaflet renders all the tiles correctly

Has someone encountered the same problem? How have you solved it?