react-google-map Как отрендерить карту в модальном окне

Всем доброго времени суток, столкнулся с проблемой рендера карты в модальном окне, когда нажимаю на триггер открытия модалки, карта рендерится не в модальном окне, а рядом с триггером. Перепробовал множество вариантов, вплоть до рендера модалки в корне DOM дерева, и по клику менять видимость, всё ровно карта рендерится отдельно. Вид до клика:

Вид после:

div с инлайн стилями и есть та самая гугл карта

код контейнерной компоненты:

import React from "react"
import "./Header.css"
import Modal from "./Modal/Modal"

let Header = () => {
    let [opened, setOpened] = React.useState(false)
    let handleOpened = () => {
        setOpened((opened) => !opened)
    }

    return (
        <header className="header">
            <span className="logo">Saunter?</span>
            <button onClick={handleOpened}>Add path</button>
            {opened ? (
                <Modal
                    handleOpened={handleOpened}
                    googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyAG4N54TJgsvI_y-omKVtkxuySRk3v0DbI&v=3.exp&libraries=geometry,drawing,places"
                    loadingElement={<div style={{ height: `100%` }} />}
                    containerElement={<div style={{ height: `400px`, width: "400px" }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                />
            ) : null}
        </header>
    )
}

export default Header

код модального окна

import "./Modal.css"
import { withScriptjs, withGoogleMap, GoogleMap } from "react-google-maps"
import { compose } from "redux"
import React from "react"
import ReactDOM from "react-dom"

const Modal = (props) => {
    let m = []
    let [, setMarkers] = React.useState(m)

    return ReactDOM.createPortal(
        <div className="modal-backgrond" onClick={props.handleOpened}>
            <div
                className="modal-path"
                onClick={(e) => e.stopPropagation()}
                id="modal-path"
            >
                <div className="header">
                    <span>Add new Path</span>
                    <div onClick={props.handleOpened} className="modal-close">
                        &times;
                    </div>
                </div>
                <div className="modal-content">
                    <div className="modal-title-block">
                        <span>Title</span>
                        <input type="text" placeholder="Text input" />
                    </div>
                    <div className="modal-short-description">
                        <span>Short description</span>
                        <textarea type="text" placeholder="Text area" />
                    </div>
                    <div className="modal-full-description">
                        <span>Full description</span>
                        <input type="text" placeholder="Text area" />
                    </div>
                </div>
                <GoogleMap
                    defaultZoom={12}
                    defaultCenter={new window.google.maps.LatLng(49.425518, 32.04849)}
                    onClick={(e) => {
                        m.push(e.latLng)
                        setMarkers((marker) => [...marker, e.latLng])
                    }}
                ></GoogleMap>
                )
            </div>
        </div>,
        document.getElementById("root")
    )
}

export default compose(withScriptjs, withGoogleMap)(Modal)

Не знаю надо ли, но вот ещё и стили модалки

.modal-backgrond {
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    transition: 0.5s ease-in-out;
}
.modal-path {
    z-index: 4;
    padding: 20px;
    border-radius: 12px;
    background-color: #fff;
    height: 400px;
    width: 400px;
    /* margin: 0 auto; */
}
.modal-close {
    cursor: pointer;
}