Leaflet Map not rendering properly [duplicate]

Question

I am using React Leaflet and want to render a map inside a modal, and I am using React Modal for the modal. I am attaching a picture of how the map looks currently.

The map is supposed to be contained within the yellow box of the modal. Here is code for my Leaflet component as well as the Modal which renders the map and finally the CSS i applied to the map.

Leaflet component

import React from 'react';
import { Map, TileLayer, Marker, Popup }  from 'react-leaflet';

class ProjectMap extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }


  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map
          center={position}
          zoom={this.state.zoom}
          doubleClickZoom={false}
          dragging={false}
          scrollWheelZoom={false}
      >
        <TileLayer
          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

export default ProjectMap;

This is the Modal component:

return (
        <div className="graph-container">
          <ProjectGraph
            openModal={this.openModal}
            closeModal={this.closeModal}
            data={this.props.projects} />
          <Modal
            isOpen={this.state.openModal}
            onRequestClose={this.closeModal}
            contentLabel="Project Graph Modal"
            style={ModalStyle}
            className="modal-container">
            <div className="black-close-modal-button close-modal-button"
              onClick={this.closeModal}>&times;</div>
            <div className="ft-modal-header-cont">
              <div className="ft-modal-header bylaws-header">
                {projectClicked.title}
              </div>
            </div>
            <div className="project-modal-grid">
                <div className="iframe">iframe</div>

                <div className="temp">temp</div>

                <div className="project-description">description</div>

                <div className="cashflow-graph">cash graph</div>

                <div className="project-map">
                  <ProjectMap />
                </div>
                <div className="project-overlays">overlays</div>
            </div>

          </Modal>
        </div>
      );

And finally CSS for the grid that defines the position of the box where I want the Map as well as css for the Leaflet map:

.project-modal-grid{
  padding: 9px;
  display: grid;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: repeat(3,1fr);
  grid-template-areas:
     ". . . f f f f f f t t t"
     "d d d d d d g g g g g g"
     "m m m m m m m m m o o o"
}

.
.
.
.

.project-map{
  grid-area: m;
  background: yellow;
  height: 300px;
}

.leaflet-container {
  height: 200px;
  width: 80%;
  margin: 0 auto;
}

Let me know if there is anything else I should provide, I can't figure out why its so disjointed. Thank you.