Create custom legend buttons for React Highcharts stacked bar chart component

index.js

import React, { useState } from 'react';
import { Box, Checkbox, FormControlLabel, FormGroup } from '@material-ui/core';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import configObj from '../utils/configObj';

export const StackedBarChart = () => {
  const [scopeButton, setScopeButton] = useState(<div />);
  const highchartsCallback = chart => {
    chart.series.forEach((item, index) => {
      return (
        <FormControlLabel
          key={index}
          control={
            <Checkbox
              defaultChecked={true}
              onChange={() => item.setVisible(!item.visible)}
              name={item.name}
              color="primary"
            />
          }
          label={item.name}
        />
      );
    });
  };
  return (
    <div>
      <HighchartsReact highcharts={Highcharts} options={configObj} callback={highchartsCallback} />;
      <FormGroup row>{scopeButton}</FormGroup>
    </div>
  );
};