Размер холста карты MapboxGL JS

Я использую Mapboxgl с React, чтобы показать карту на моей веб-странице, но у меня большие проблемы с установкой размера mapbox. Я написал свой собственный класс css, чтобы хотя бы показать карту, иначе по какой-то причине он отображается с нулевой высотой. мой пользовательский класс css выглядит так

.custom-map {
  display: flex;
  width: 100%;
  height: 54em;
}

Я также загрузил файл mapboxgl css локально в свой проект, полный файл загружается на страницу. мой текущий исходный код можно найти здесь, я экспериментировал с кучей стилей, где я установил стили здесь

 <div
        ref = {el => (this.mapContainer = el)}
        className = "mapboxgl-map absolute custom-map top right left bottom"
 />

В настоящее время контейнер mapbox выглядит очень похожим на это, обратите внимание, что информация, всплывающая из mapbox, доходит до того места, где я хочу, а карта - нет.

Файл css mapbox устанавливает высоту карты в%, но высота в% по какой-то причине не работает, я должен установить высоту с помощью em. Отключив настраиваемую карту и установив высоту в em из файла css mapbox, я получаю фактическую высоту больше 100%. Изменение свойства width из .mapboxgl-map ничего не делает, даже при использовании em.

Я не уверен, где находится ошибка, поэтому мне сложно опубликовать всю соответствующую информацию, которая может потребоваться для решения этой проблемы, я буду рад опубликовать любую дополнительную информацию, которая потребуется. Заранее благодарим вас за ответы!