React data not populating in chart.js - reactjs

Question

just having issues with populating the JSON into my chart. I'm seeing the response in the console log with API status with no errors, but for some reason, it's not populating it. Using Axios to fetch the example API to populate the emp sal and age. I have a feeling that I need to move the "UseEffect" somewhere but not sure where that needs to go.
import React, { useState, useEffect } from "react";
import { Link } from 'react-router-dom';
import LineChart from '../../charts/LineChart01';
import Icon from '../../images/icon-01.svg';
import EditMenu from '../EditMenu';
import axios from "axios";
// Import utilities
import { tailwindConfig, hexToRGB } from '../../utils/Utils';
const DashboardCard01 = () => {
const [chartData, setChartData] = useState({});
const [employeeSalary, setEmployeeSalary] = useState([]);
const [employeeAge, setEmployeeAge] = useState([]);
const chart = () => {
let empSal = [];
let empAge = [];
axios
.get("http://dummy.restapiexample.com/api/v1/employees")
.then(res => {
console.log(res);
for (const dataObj of res.data.data) {
empSal.push(parseInt(dataObj.employee_salary));
empAge.push(parseInt(dataObj.employee_age));
}
setChartData({
labels: empAge,
datasets: [
{
label: empAge,
data: empSal,
//backgroundColor: ["rgba(75, 192, 192, 0.6)"],
borderWidth: 4
}
]
});
})
.catch(err => {
console.log(err);
});
console.log(empSal, empAge);
datasets: [
// Indigo line
{
data: empAge,
fill: true,
backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
borderColor: tailwindConfig().theme.colors.indigo[500],
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
clip: 20,
},
// Gray line
{
data: empSal,
borderColor: tailwindConfig().theme.colors.slate[300],
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
clip: 20,
},
]
};
useEffect(() => {
chart();
}, []);
return (
<div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
<div className="px-5 pt-5">
<header className="flex justify-between items-start mb-2">
{/* Icon */}
<img src={Icon} width="32" height="32" alt="Icon 01" />
{/* Menu button */}
<EditMenu className="relative inline-flex">
<li>
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 1</Link>
</li>
<li>
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 2</Link>
</li>
<li>
<Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">Remove</Link>
</li>
</EditMenu>
</header>
<h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Plus</h2>
<div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
<div className="flex items-start">
<div className="text-3xl font-bold text-slate-800 mr-2">$24,780</div>
<div className="text-sm font-semibold text-white px-1.5 bg-green-500 rounded-full">+49%</div>
</div>
</div>
{/* Chart built with Chart.js 3 */}
<div className="grow">
{/* Change the height attribute to adjust the chart height */}
<LineChart data={chartData} width={389} height={128} />
</div>
</div>
);
}
export default DashboardCard01;