Error in showing the tooltip for Scatter chart (React ApexCharts) - reactjs

Question

My scatter chart is rendered correctly. I have a problem with the custom tooltip function I have created to show the details of the data points on the chart. When I hover the tooltip, it shows an error as
"Uncaught TypeError: Cannot read properties of undefined "
I get the response data for the selected dates from my server using api call and my chart is rendered accordingly. From the received response I have created a dropdown with all employeeName as options to select. When selecting an employeeName I want to show the data point of that person in the scatter chart. My code is working fine for all these functions. But the problem is with the chart options configured. I have given the property type="numeric" for both the x-axis and y-axis in the options object.
If this type="numeric" property is specified, my chart is working fine when I select individual employees from the dropdown but the tooltip shows the error as I mentioned.
If the type="numeric" property is not specified, my chart does not show the data points correctly when I select the employee name, but the tooltip works fine. When I hover over the tooltip for the shown data points does not throw any error.
Below I have given sample data.
import React, { useState, useEffect } from "react";
import axios from "axios";
import ApexCharts from "react-apexcharts";
import "./styles.css";
const ScatterChart = () => {
const[chartData,setChartData]=useState([]);
const [employeeName, setEmployeeName] = useState("");
const [employeeNames, setEmployeeNames] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const data = [
{
employeeName: "John Doe",
percentageOfTasksCompleted: 35,
percentageOfTasksCompletedInTime: 25
},
{
employeeName: "Jane Doe",
percentageOfTasksCompleted: 45,
percentageOfTasksCompletedInTime: 30
},
{
employeeName: "Bob Smith",
percentageOfTasksCompleted: 55,
percentageOfTasksCompletedInTime: 40
}
];
const newData = data.map((d) => {
return {
x: d.percentageOfTasksCompleted,
y: d.percentageOfTasksCompletedInTime,
employeeName: d.employeeName,
};
});
const employeeNames = [...new Set(newData.map((d) => d.employeeName))];
setEmployeeNames(employeeNames);
setChartData(newData);
};
useEffect(() => {
setFilteredData(
employeeName !== null && employeeName !== ""
? chartData.filter((d) => d.employeeName === employeeName)
: chartData
);
}, [employeeName, employeeNames, chartData]);
const options = {
chart: {
type: "scatter",
toolbar: {
show: true,
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false | '<img src="/static/icons/reset.png" width="20">',
customIcons: [],
},
export: {
csv: {
filename: "Scatter plot by supervisor",
columnDelimiter: ",",
headerCategory: "category",
headerValue: "value",
dateFormatter(timestamp) {
return new Date(timestamp).toDateString();
},
},
svg: {
filename: "Scatter plot by supervisor",
},
png: {
filename: "Scatter plot by supervisor",
},
},
},
},
xaxis: {
title: {
text: "Percentage of Tasks Completed",
align: "center",
verticalAlign: "top",
floating: true,
offsetY: 100,
style: {
fontSize: "14px",
fontWeight: "bold",
color: "#666",
},
},
tickAmount: 6,
min: 0,
max: 100,
type: "numeric",
},
yaxis: {
title: {
text: "Percentage of Tasks Completed In Time",
align: "center",
verticalAlign: "top",
floating: true,
offsetX: -5,
style: {
fontSize: "14px",
fontWeight: "bold",
color: "#666",
},
},
tickAmount: 6,
min: 0,
max: 100,
type: "numeric",
},
tooltip: {
custom: function ({ dataPointIndex }) {
return (
'<div class="tooltip">' +
"<p class='employee-name'>Employee Name : " +
filteredData[dataPointIndex].employeeName +
"</p>" +
"<p class='percentage-complete'>Percentage of Tasks Completed : " +
filteredData[dataPointIndex].x +
"%</p>" +
"<p class='percentage-in-time'>Percentage of Tasks Completed In Time : " +
filteredData[dataPointIndex].y +
"%</p>" +
"</div>"
);
},
},
};
return (
<div>
<div style={{ display: "flex", alignItems: "center", padding: "10px" }}>
<input
type="date"
value={fromDate}
onChange={(e) => setFromDate(e.target.value)}
style={{ marginRight: "10px", padding: "5px" }}
/>
<input
type="date"
value={toDate}
onChange={(e) => setToDate(e.target.value)}
style={{ marginRight: "10px", padding: "5px" }}
/>
<select
id="employee-name"
value={employeeName}
onChange={(e) => setEmployeeName(e.target.value)}
style={{ marginRight: "10px", padding: "5px" }}
>
<option value="">All</option>
{employeeNames.map((name) => (
<option key={name} value={name}>
{name}
</option>
))}
</select>
<button
onClick={() => {
handleRefresh();
setEmployeeName("");
}}
style={{ padding: "5px 10px" }}
>
Refresh
</button>
</div>
{filteredData !== undefined && filteredData !== null ? (
<ApexCharts
options={options}
series={[{ data: filteredData }]}
type="scatter"
width="600"
height="500"
/>
) : null}
</div>
);
};
export default ScatterChart;