Google charts is not rendering properly in react js

I’m using react-google-charts for creating a Geo Chart.

Sometimes the chart renders, sometimes it doesn’t. When it renders, and I reload it disappears and doesn’t render again.

import React, { useState, useEffect } from 'react';
import {
  Box,
  Grid,
  TextField,
  IconButton,
  MenuItem,
  Dialog,
  DialogContent,
  Typography
} from '@mui/material';
import { MenuSharp } from '@mui/icons-material';
import Chart from 'react-google-charts';
// import { useBeforeRender } from 'src/hooks/useBeforeRender';

function GeoChart({ rows, config, onConfigChange }) {
  const [columns, setColumns] = useState();
  const [data, setData] = useState([[config?.keyColumn, config?.valueColumn]]);

  const options = {
    colorAxis: {
      minValue: 0,
      colors: config?.chartColors?.length > 0 && [config?.chartColors]
    }
  };

  useEffect(() => {
    let modifiedColumns = rows[0] && Object.keys(rows[0])?.map((row) => row);
    setColumns(modifiedColumns);
  }, [rows]);

  useEffect(() => {
    let modifiedData = rows?.map((row) => {
      return [row[config?.keyColumn], row[config?.valueColumn]];
    });
    setData((prevValue) => [prevValue[0], ...modifiedData]);
  }, [rows, config?.keyColumn, config?.valueColumn]);

  return (
    <Box sx={{ width: '100%', height: '100%', p: 1 }}>
      <Box
        sx={{
          height: '90%',
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          flexDirection: 'center',
          px: 1,
          mt: 2
        }}
      >
        {data?.length < 0 ? (
          'Invalid Data'
        ) : (
          <Chart
            width={'100%'}
            height={'100%'}
            chartType="GeoChart"
            data={data}
            options={options}
            mapsApiKey="API KEY"
          />
        )}
      </Box>
    </Box>
  );
}

export default GeoChart;

I’ve checked data, options and config are being set properly everytime. But it still it doesn’t work.