How to declare federated components types with typescript module declaration

consumed-mfe.d.ts

declare module 'remoteA/componentA' {
  function Component(props: unknown): JSX.Element;
  export default Component;
}

declare module 'remoteB/componentB' {
  export type ComponentProps = {
    foo: boolean;
    bar?: () => void;
  };
  function Component(props: ComponentProps): JSX.Element;
  export default Component;
}

next-page.tsx

import dynamic from 'next/dynamic';

const ComponentA = dynamic(() => import('remoteA/componentA'), { ssr: true });

const ComponentB = dynamic(() => import('remoteB/componentB'), { ssr: false });

export default function Home() {
  return (
    <main>
     <ComponentA />
     <ComponentB foo bar={() => console.log('Hello, World!')} />
     
     <ComponentB foo={() => console.log('Type error!')} bar />
    </main>
  );
}