Unable to use ketcher-react with nextjs

I am trying to use ketcher with nextjs. I tries looking at the epam discussions but didnt find any solutions there either. I get the error window is not defined, even after dynamic import

My code is as below:

KetcherEditorReact.tsx

import { StandaloneStructServiceProvider } from "ketcher-standalone";
import { Editor } from "ketcher-react";
import "ketcher-react/dist/index.css";

const structServiceProvider = new StandaloneStructServiceProvider();

export default function KetcherEditorReact() {
  return (
    <Editor
      staticResourcesUrl=""
      structServiceProvider={structServiceProvider}
      errorHandler={(err) => console.log(err)}
    />
  );
}

Page.tsx

import dynamic from "next/dynamic";

import "ketcher-react/dist/index.css";
const KetcherEditorReact = dynamic(() => import("./ketcherEditorReact"), {
  ssr: false,
});

export default function Home() {
  return <KetcherEditorReact />;
}

//Edit I even tried dynamically importing ketcher-react and ketcher-standalone packages that are throwing the error like:

const DynamicEditor = dynamic(
  () => import("ketcher-react").then((module) => module.Editor),
  {
    loading: () => <p>Loading Editor...</p>, // Optional loading indicator
    ssr: false, // Disable server-side rendering
  }
);

But no luck

The only thing needed to fix this was to add "use client" on ketcherEditorReact file