How to rename the Apex donut chart labels

I am a beginner at react. I am trying to get the number of Open, Handled, and Pending tickets in the database. Therefore I have used the Axios and am obtaining the data from the database from which I am calculating the number of Open, Pending, and Handled tickets. These are based on values to the donut chart. I am trying to rename the donut chat legend labels into "Open", "Handled" and "Pending", but it isn't getting renamed. The output that I get is: That is the default names such as "series 1, series 2, series 3" are only getting displayed. How to rename the legend labels as above.

import React, {Component} from "react";
import GridWrapper from "../helpers/gridWrapper";
import Chart from 'react-apexcharts'
import ContentWrapper from "../helpers/contentWrapper";
import GridWrapperL from "../helpers/twoSideBySideWrapper/gridWrapperL";
import axios from "axios";


export default class Charts extends Component{
 


  constructor(props) {
    super(props);

    this.state = {
      options: {
        chart: {
          id: 'apexchart-example'
        },
      },
      series: [10,20,30]
    }
  }
  async componentDidMount(){
    const salary=[]; const age=[]; var Pending=0; var Open=0; var Handled=0;
    await axios.get('http://localhost:5000/tickets').then (Response=>{
     console.log("Response" , Response.data.ticket);
     const data=[] = Response.data.ticket;
     const emp_name=[];
     const OpenArr=[] , HandleArr=[] , PendingArr=[];
      data.forEach(element => {
  
         
        if(element.ticketStatus == "Pending"){
         
          Pending = Pending+1;
        }
        if(element.ticketStatus=="Open"){
          Open =Open+1;
        }

        if(element.ticketStatus =="Handled"){
          Handled=Handled+1;
        }
      });
     
   
      this.setState({
        options: {
          chart: {
            id: 'apexchart-example'
          },
          xaxis:{
            categories:emp_name
          },
      
        },

      series:[Open,Handled,Pending],
      chartOptions: {
        labels: ['Open', 'Handled', 'Pending']
      }
      
      })
    })
    .catch(err =>{
      console.log("error", err)
    })

  }
 
  render(){
  return(
 
        <center>
    <div>
      Apex
      {/* We can change the type by simply typing "line" */}
      <Chart options={this.state.options} series={this.state.series} chartOptions={this.state.chartOptions} type="donut" width={1000} height={520} />
    </div>
    </center>
 
  );
  }
};