Проблема с получением компонента HighchartsReact для правильного заполнения контейнера

У меня есть 3-компонентное приложение для реагирования, которое выглядит красиво, с двумя диаграммами реагирования на акции вверху слева и вверху справа, которые делят пространство равномерно над красивой сеткой. как показано ниже.

Вот код моей панели инструментов, где вы можете увидеть, как два идентичных компонента диаграммы вставляются в свои блоки div.

import React from "react";


import AllocationPanel from "./panels/AllocationPanel";
import PerformancePanel from "./panels/PerformancePanel";
/*import PositionsPanel from "./panels/PositionsPanel";*/
import AgPositionPanel from "./panels/AgPositionPanel";


export default function Dashboard() {
return (
<div className="panels">
  <div className="panel-info">
    
  </div>
  <div className="panel-allocation" >
    <PerformancePanel />
  </div>
  <div className="panel-balance">
    <PerformancePanel />
  </div>
  <div className="panel-positions">
    <AgPositionPanel />
  </div>
</div>
 )
}

Поскольку я так люблю диаграммы высоких значений, я решил заменить две диаграммы реакции двумя диаграммами высоких частот. Вот код компонента ReactHighcharts, который я использовал для замены двух исходных диаграмм. Как видите, очень простой график.

import React, {Component} from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const options = {
 title: {
   text: 'highcharts-react-official'
},
  series: [{
  data: [1, 5, 3, 4]
}]
}

export default class AllocationPanel extends Component{
constructor(){
super();
this.chartComponent = React.createRef();

}
componentDidMount(){
this.chartComponent.current.chart.reflow();
}
render() {
 return(
  <HighchartsReact
    highcharts={Highcharts}
    options={options}
    ref={this.chartComponent}
  />
);
}
}

Когда я заменяю компонент ReactHighCharts выше, панель инструментов выглядит так: высокие диаграммы неравны по размеру, не заполняют свои блоки div и выглядят почти так, что на обоих концах почти отсутствуют пробелы.

Вы хоть представляете, что заставляет Highcharts испортить формат / макет приложения и не соответствовать равномерно, как React Charts на верхнем фото? Я пробовал исправления перекомпоновки, исправления css и, похоже, не могу понять, почему Highcharts все сбрасывает.

Если у вас есть идеи, дайте мне знать. Я исчерпал другие сообщения, поиски в Интернете и, кажется, не могу заставить два высоких графика равномерно разделить окно и изменить размер вместе с окном. Благодарность!

P.S. Вот CSS для трех контейнеров div, который поможет. Я чувствую, что упускаю что-то простое.

.panels {
   display: grid;
  grid-gap: 10px;
  grid-template-columns: 1px auto auto;
  grid-template-rows: auto auto;
  overflow:hidden;
}
.panel-info {
  grid-row: span 2;
}
.panel-allocation {
  overflow:hidden ;
}
.panel-balance {
  overflow:hidden ;
}
.panel-positions {
grid-column: span 2;
}
.panels > div {
  /* border: 1px solid black; */
}

@media (max-width: 750px) {
.panels {
  grid-template-columns: 1px auto;
  grid-template-rows: auto auto auto;
 }
.panel-positions {
  grid-column: span 2;
  }
 }

 @media (max-width: 750px) {
 .panels {
    grid-template-columns: auto;
  }
.panel-positions {
  grid-column: span 1;
  }
 }