React-Bootstrap tabbed component changes size of default active tab content

Question

I have a tabbed component made with react boostrap. I have 4 different charts (made with react-charts js 2). Each of them is a child to a parent Tab. So far I did pretty well; I was able to give them a desired size with a css class called chartContainer. The thing is that, for some reason, the Tab that corresponds to the default active key shrinks the chart. And it doesn´t respond to the size that I provided in the class.

Here´s my App.css file

.chartContainer {
    max-width: 100%;
    width: 80vw;
    height:40vh ;
    align-items: stretch;
} 

Here´s my Tabbed Component

import { React, useState } from 'react'


import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
//import TabContent from 'react-bootstrap/esm/TabContent';

//import Sonnet from '../../components/Sonnet';

import OficialDynamicLineChart from '../../DynamicLineCharts/OficialDynamicLineChart';
import BlueDynamicLineChart from '../../DynamicLineCharts/BlueDynamicLineChart';
import CCLDynamicLineChart from '../../DynamicLineCharts/CCLDynamicLineChart';
import BolsaDynamicLineChart from '../../DynamicLineCharts/BolsaDynamicLineChart';



function TabbedComponent() {



  return (
    <>
      <Tabs
        defaultActiveKey="Dolar Blue"
        //id="uncontrolled-tab-example"
        className="mb-3"

      >
        <Tab eventKey="Dolar Oficial" title="Dólar Oficial">
          

            <div  className='chartContainer' style={{ position: "relative"}} >
              <OficialDynamicLineChart />
            </div>
          
        </Tab>
        <Tab eventKey="Dolar Blue" title="Dólar Blue">
         
            <div className='chartContainer' style={{ position: "relative"}} >
              <BlueDynamicLineChart />
            </div>
         
        </Tab>
        <Tab eventKey="Dolar Contado con Liquidacion" title="Dólar Contado con Liquidación">
          
            <div  className='chartContainer' style={{ position: "relative"}} >
              <CCLDynamicLineChart />
            </div>
          
        </Tab>

        <Tab eventKey="Dolar Bolsa" title="Dólar Bolsa" >
         
            <div className='chartContainer' style={{ position: "relative"}} >
              <BolsaDynamicLineChart />
            </div>
        
        </Tab>
      </Tabs>
    </>
  );



}
export default TabbedComponent;

I´m pretty sure it´s a problem related to Bootstrap and not react-charts because the same problem arises when I change the defaultActiveKey.