import * as React from "react";

const fallbackStyle: React.CSSProperties = {
  padding: "20px",
  textAlign: "center",
  fontSize: "16px"
};

const PrimeLoader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    Loading...

2. primeLazy.tsx

import * as React from 'react';

/* UTIL / NON-LAZY EXPORTS */
export { FilterMatchMode, FilterOperator } from 'primereact/api';
export { confirmDialog } from 'primereact/confirmdialog';
export { classNames } from 'primereact/utils';

/* BUTTON */
export const Button = React.lazy(() =>
  import('primereact').then(m => ({ default: m.Button }))
);

/* FILEUPLOAD */
export const FileUpload = React.lazy(() =>
  import('primereact').then(m => ({ default: m.FileUpload }))
);

/* INPUTTEXT */
export const InputText = React.lazy(() =>
  import('primereact').then(m => ({ default: m.InputText }))
);

/* ACCORDION */
export const Accordion = React.lazy(() =>
  import('primereact/accordion').then(m => ({ default: m.Accordion }))
);
export const AccordionTab = React.lazy(() =>
  import('primereact/accordion').then(m => ({ default: m.AccordionTab }))
);

/* AUTOCOMPLETE */
export const AutoComplete = React.lazy(() =>
  import('primereact/autocomplete').then(m => ({ default: m.AutoComplete }))
);

3. WebPart.tsx.

import * as React from 'react';
import AppLoader from './AppLoader';
import AppRouter from './AppRouter';

// Import PrimeReact CSS once (global)
import 'primereact/resources/themes/lara-light-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

const App: React.FC = (props) => {
return (



);
}

export default App;

How can I properly lazy-load PrimeReact components for my application?

Can anyone help me on the same?

Thanks