How to resolve import for "@progress/kendo-theme-default/dist/all.css" in my React Project using Vite?

Hi, 

I am using Vite Tool instead of webpack in our React project. And I am trying to import "@progress/kendo-theme-default/dist/all.css" in one of the .js file. But getting an error where it says - 

Failed to resolve import "@progress/kendo-theme-default/dist/all.css" from "..\Arcadix.i.Product.React\Framework\Controls\SplitPane\SplitPaneTemp.js".

Now, I have confirmed, and this file does exist in my node_modules.

I tried many appoaches, including adding this in my Vite Config files under OptimizedDeps 

I went through the following discussions

- https://github.com/vitejs/vite/discussions/9384

- https://github.com/telerik/kendo-ui-core/issues/6982#issuecomment-1232496103

and also updated the plugins 

Also, I deleted the already created "node_modules" folder and the "package-lock.json" prior to everything.

But none of these solutions seems to work.

How can I fix this issue? Or is there something I am doing wrong?

Thanks in advance.