Display data retrieved from mysql in piechart - mysql

Question

I need some help in creating a pie chart in react for the data retrieved from mysql database.
App.js code :
import React , { PureComponent } from 'react';
import {useState , useEffect } from 'react';
import './App.css';
import { PieChart , Pie , Tooltip } from "recharts";
function App() {
const [category, setCategory] = useState([]);
useEffect(()=>{
const getDbData = async ()=>{
const getA = await fetch('http://localhost:3001/posts/');
const getData = await getA.json();
setCategory(getData);
console.log(getData);
// console.log(data);
}
getDbData();
},[])
return (
<div className="App">
<h1>Hello World!!</h1>
<h2>My PieChart</h2>
<PieChart width={400} height={400}>
<Pie dataKey="value" isAnimationActive={false}
data={category}
cx="50%" cy="50%" outerRadius={80} fill="#8884d8"
label
/>
<Tooltip />
</PieChart>
</div>
);
}
export default App;
Also I have installed all the dependencies required but still pie chart is not created for the data which I have fetched from database.
Server.js :
const express = require("express");
const app = express();
const mysql = require('mysql');
const cors = require('cors');
app.use(cors());
app.use(express.json());
const db = mysql.createConnection({
user : 'root',
host : 'localhost',
password : 'password',
database : 'lab',
});
db.connect(function(err) {
if (err) throw err;
console.log("Connected!");
});
app.get('/posts', (req, res) => {
db.query("SELECT empname , empage FROM employee;", (err, results, fields) => {
if(err) throw err;
res.send(results);
});
});
app.listen(3001 ,(error)=>{
if (error) throw error ;
console.log("Server is running on port 3001");
})
When I hardcode data and try to display in pie chart then it works But it is not working when I am trying to display the data which I have fetched from database.