MUI X ChartBar Warning: Failed prop type: Invalid prop `axisData.x.value` supplied to `ChartsAxisTooltipContent`, expected one of type [number]

Question

Like in the title, I got this warning when using MUI X ChartBar in my React app. I followed the same thing as the document shown in the second bar example: https://mui.com/x/react-charts/bars/

How to solve this?

This is my code

const [MonthlyJoinLibrary, setMonthlyJoinLibrary] = useState([])

<BarChart
 width={window.innerWidth - 55}
 height={450}
 dataset={MonthlyJoinLibrary}
 xAxis={[{ scaleType: 'band', dataKey: 'date', dateFormatter }]}
 series={[
  { dataKey: 'male_student', label: 'សិស្សប្រុស', color:"blue", valueFormatter},
  { dataKey: 'female_student', label: 'សិស្សស្រី', color:"red", valueFormatter},
  { dataKey: 'male_teacher', label: 'គ្រូប្រុស', color:"aqua", valueFormatter},
  { dataKey: 'female_teacher', label: 'គ្រូស្រី', color:"rgb(255,150,80)", valueFormatter},
 ]}
/>

Warning Output:

I tried searching for a solution but still can't find a way to solve it. I expect there will be no warning output.