Archilogic embed floor plan with next js project

I am trying to use Archilogic embed module to show 3d floorplan in my next.js project.

I am trying below code and it says : TypeError: ArchilogicEmbed is not a constructor

import React, { useEffect } from "react";
import dynamic from "next/dynamic";

//import ArchilogicEmbed from "@archilogic/embed-api";

const Archilogic = () => import("@archilogic/embed-api");
const ArchilogicEmbed = dynamic(Archilogic, {
  ssr: false,
});



export default function Dashboard() {
  useEffect(() => {
    async function demo() {
      
      const embedEl = document.getElementById('mapid')
       const embedEl = document.getElementById("mapid");
      const viewer = ArchilogicEmbed(embedEl, {
        transparentBackground: true,
        //presentationMode: PresentationMode.jumpToCameraDefault,
        minimap: false,
        showTitle: false,
        showLogo: false,
        lowResTexturesOnly: false, // prevent hi-res textures from loading, gives a loading-time performance boost at the cost of visual quality
        bookmarksActive: false, // control whether the bookmarks menu should be open or closed
        uiButtons: {
          birdMode: false,
          personMode: false,
          fullscreen: false,
          bookmarkStrip: false,
          share: false,
          help: false,
          presentation: false,
          exportImage: false,
        },
      });

      // await for the viewer embed to be ready
      await viewer.viewerReadyPromise.catch((err) =>
        console.error("viewer couldnt be initialized", err)
      );

      const demoSceneId = <sceneId>;
      const publishableToken = <token>;
      const tokenOptions = { publishableToken };
      await viewer.loadScene(demoSceneId, tokenOptions).catch((err) => {
        // scene couldn't be loaded - it may be private or the ID couldn't be found
        console.error("There was an error loading the scene:", err);
      });
    }

    demo();
  }, []);

}

How do I use ArchilogicEmbed with Next.js?

Here is the link I am following. The example on this link shows ArchilogicEmbed as constructor to initialize viewer and then show it on the page.

Here is codesandbox example from Archilogic.

I was able to solve it using dynamic import, a slightly different method than what juliomalves suggested here.

I made another file with regular import, but calling it dynamically on the client side. as below:

import React, { useEffect } from "react";
import dynamic from "next/dynamic";

export default function FloorPlan3D() {
  const Map3D = dynamic(() => import("./floorplan"), {
    loading: () => <p>A map is loading</p>,
    ssr: false, // This line is important. It's what prevents server-side render
  });

  return <Map3D />;
}