Let's say I have a component called PersonalDetailsForm which I import dynamically in my multi wizard registration process. And this PersonalDetailsForm has a Loading state which I want to define inside PersonalDetailsForm.Loading.

const PersonalDetailsForm = () => <h1>Test</h1>
const PersonalDetailsFormLoader = () => {
  return <>loading...</>;
};

PersonalDetailsForm.Loading = PersonalDetailsFormLoader;
export default PersonalDetailsForm

Then I import this in my RegistrationFormSteps Component

const PersonalDetailsForm = dynamic(() => import("./personal-details-form"), {
  ssr: false,
  loading: () => <PersonalDetailsForm.Loading />,
});

const loaders = [<TypeSelectionForm.Loading />, <PersonalDetailsForm.Loading />];

In both cases I get this error

 
Property 'Loading' does not exist on type 'ComponentType<{}>'.
Property 'Loading' does not exist on type 'ComponentClass<{}, any>'.