Some Syncfusion chart components not rendering properly in React even after license registration

I'm using Syncfusion's chart components in a React + Vite project. I've registered the Syncfusion license properly, and some charts like LineSeries and ColumnSeries work fine. However, certain other charts (like PieSeries or AreaSeries) don't render anything even though there's no error in the console.

I’ve already:
Installed @syncfusion/ej2-react-charts
Imported all required modules
Registered the license using registerLicense('KEY') in main.jsx

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import { registerLicense } from '@syncfusion/ej2-base';
registerLicense('YOUR_LICENSE_KEY'); // replace with actual key
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// App.jsx
import React from 'react';
import {
  AccumulationChartComponent,
  AccumulationSeriesCollectionDirective,
  AccumulationSeriesDirective,
  Inject,
  PieSeries,
  AccumulationTooltip
} from '@syncfusion/ej2-react-charts';
const App = () => {
const pieData = [
{ x: 'Food', y: 40 },
{ x: 'Rent', y: 30 },
{ x: 'Utilities', y: 20 },
{ x: 'Others', y: 10 }
];
return (
<div style={{ width: '500px', margin: 'auto' }}>
<AccumulationChartComponent>
<Inject services={[PieSeries, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective
dataSource={pieData}
xName="x"
yName="y"
type="Pie"
/>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
);
};
export default App;