React adding multiple recharts charts causes frame drop on resize

I'm trying to make a dashboard containing multiple charts, I'm also using a sidebar that pushes the content aside. The problem is when adding around 5 charts opening the sidebar causes significant frame drop. how can i fix this? will the production build change this?

dashboard charts part:

import { Grid,Hidden } from "@material-ui/core";
import React from "react";
import CustomAreaChart from "../../Components/Charts/CustomAreaChart";
import CustomRadarChart from "../../Components/Charts/CustomRadarChart";
import CustomBarChart from "../../Components/Charts/CustomBarChart";


export default function SubStats({subStatsData}){
  return(
    <Grid container spacing={3}>
      <Hidden smDown> <Grid item md={8}> <CustomAreaChart data={subStatsData.AreaChartData}/> </Grid></Hidden>
      <Grid item sm={12} md={4}> <CustomRadarChart data={subStatsData.RadarChartData}/> </Grid>

      <Grid item sm={12} md={4}> <CustomBarChart/> </Grid>
      <Grid item sm={12} md={4}> <CustomBarChart/> </Grid>
      <Grid item sm={12} md={4}> <CustomBarChart/> </Grid>
    </Grid>
  );
}

chart

import React from "react";
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer} from "recharts";

const data = [
  {
    name: "Page A",
    uv: 4000,
    pv: 2400,
    amt: 2400
  },
  {
    name: "Page B",
    uv: 3000,
    pv: 1398,
    amt: 2210
  },
  {
    name: "Page C",
    uv: 2000,
    pv: 9800,
    amt: 2290
  },
  {
    name: "Page D",
    uv: 2780,
    pv: 3908,
    amt: 2000
  },
  {
    name: "Page E",
    uv: 1890,
    pv: 4800,
    amt: 2181
  },
  {
    name: "Page F",
    uv: 2390,
    pv: 3800,
    amt: 2500
  },
  {
    name: "Page G",
    uv: 3490,
    pv: 4300,
    amt: 2100
  }
];

 export default function CustomBarChart() {
  return (
    <div style={{height:300,fontSize:22,direction:'ltr', border: '3px solid #707070',marginTop: '20px'}}>
    <ResponsiveContainer>
        <BarChart
        data={data}
        margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5
        }}
        >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="pv" fill="#8884d8" />
        </BarChart>
    </ResponsiveContainer>
    </div>
  );
}

note: all charts are more or less coded the same way