react-google-charts: Table has no columns and Cannot draw chart: no data specified

I have a project, and this project contains several interfaces, and among these interfaces, I have an interface for displaying statistics.

In order to display the statistics, I used a library:

react-google-charts

But I got this problem:

Table has no columns
Cannot draw chart: no data specified

how can i solve it?,

Note that the print function returns:

This file contains pie chart,

import { Button, Card, Col, Row, Space } from 'antd';
import { FunctionComponent, useContext, useEffect, useState } from 'react';
import ReactChart from '../../common/chart';
import { typeChart } from '../../common/chart/bar-chart/data/enum';
import '../../../styles/dashboard/index.scss';
import { AuthContext, IAuthContext } from '../../../contexts/auth-context';
import colors from '../../../constants/colors';
import calendar1 from '../../../assets/icons/calendar1-icon.svg';
import calendar2 from '../../../assets/icons/calendar2-icon.svg';
import calendar3 from '../../../assets/icons/calendar3-icon.svg';
import thermometer from '../../../assets/icons/thermometer-icon.svg';
import waving from '../../../assets/icons/waving-hand-icon.svg';
import { useNavigate } from 'react-router';
import { FormattedMessage } from 'react-intl';
import { useQuery } from 'react-query';
import statisticCharts from '../../../api/nuclearMedicineApi/services/Statistic';
import { BsFillSquareFill } from 'react-icons/bs';
import { Chart } from "react-google-charts";
interface DashboardProps { }
const Dashboard: FunctionComponent<DashboardProps> = () => {
const auth = useContext<IAuthContext>(AuthContext);
// **************************************************************
const chartsQueryCityData = useQuery(['chartsQueryCityData'], () =>
statisticCharts.GetTopographyStatistic({ FilterType: 2 }),
).data;
var cityTopography: any[] = [];
const [xyCitytotalTopography, setxyCitytotalTopography] = useState<any[]>([])
useEffect(() => {
// trying for City
chartsQueryCityData?.resultList.map((xy: any, index: any) => {
console.log('mmmm: ', xy);
if (xy?.x !== undefined && xy?.yPercent !== undefined) {
if (xy?.yPercent !== 0) {
let xyData: any[] = [xy?.x, xy?.yPercent];
cityTopography.push(xyData);
setxyCitytotalTopography(cityTopography);
console.log('xxxx: ', xyCitytotalTopography);
return cityTopography;
}
}
})
}, [chartsQueryTopographyData, chartsQueryCityData, chartsQueryAgeData]);
console.log('xxxx: ', xyCitytotalTopography);
const data: any[] = xyCitytotalTopography;
console.log('datadatadata: ', data);
const options = {
is3D: true,
};
// **************************************************************
const current = new Date();
const date = `${current.getFullYear()}/${current.getMonth() + 1
}/${current.getDate()}`;
const navigate = useNavigate();
return (
<>
<div className='dashdoard-donutData'>
<Row>
<Col className='mt-8' >
<Chart
chartType="PieChart"
data={data}
options={options}
width={"100%"}
height={"400px"}
/>
</Col>
</Row>
</Card>
</Col>
</Row>
</div>
</>
);
};
export default Dashboard;

the data must be as this form:

export const data = [
["Task", "Hours per Day"],
["Work", 11],
["Eat", 2],
["Commute", 2],
["Watch TV", 2],
["Sleep", 7],
];

that means the header ["Task", "Hours per Day"] must be string and must be found,

for that add an empty array, with empty string ['', ''],

the updates that i do:

const [xyCitytotalTopography, setxyCitytotalTopography] = useState<any[]>([['', '']])
// trying for City with ypercent  ****pie chart 
chartsQueryCityData?.resultList.map((xy: any, index: any) => {
if (xy?.x !== undefined && xy?.yPercent !== undefined) {
if (xy?.yPercent !== 0) {
let xyData: any[] = [xy?.x, xy?.yPercent];
cityPercent.push(xyData);
setxyCitytotalTopography(cityPercent);
return cityPercent;
}
}
})
<Col className='mt-4'>
<br />
<br />
<Chart
chartType="PieChart"
data={xyTopographyPercent}
options={options}
width={"130%"}
height={"500%"}
/>
</Col>