Editor.js rendering/outputting two editors in React

I'm using Editor.js in React (Next.js) & have the original package, not the 3rd party wrappers for react.

For a reason I don't know, it is rendering/showing/outputting two codex-editores on the page! Both of them are working correctly and independently.

Screenshot (I added borders to show the area)

Codes

index.jsx

import EditorJS from "@editorjs/editorjs";
import css from "./removeme.module.scss" // just to see the area;

export default function index(params) {
   const editor = new EditorJS({
      holder: "editorjs",
   });

   return (
      <>
         <h1>New Note</h1>
         <div className={css["editor-area"]} id="editorjs" />
      </>
   );
}

_app.js

function SafeHydrate({ children }) {
   return <div suppressHydrationWarning>{typeof window === "undefined" ? null : children}</div>;
}

function MyApp({ Component, pageProps }) {
   return (
      <SafeHydrate>
         <Body>
            <Sidebar items={SidebarLinks} />
            <Page>
               <Component {...pageProps} />
            </Page>
         </Body>
      </SafeHydrate>
   );
}

export default MyApp;

What I tried

Commenting <SafeHydrate> and render the page normally: no luck. (I added SafeHydrate so I can use window API and also disable SSR)
Removing my custom CSS (the borders): no luck.
Removing id="editorjs" from <div>: nothing shows up.

Additional Notes

The page localhost:3001/notes/editor is only accessible if visited from sidebar menu (SPA-like). I mean, it shows 'window is not defined' if opened directly.

What's causing the problem?

Solution

Using useEffect solves the issue since it only runs after the initial page render:

export default function index(params) {
   useEffect(() => {
      const editor = new EditorJS({
         holder: "editorjs",
      });
   }, []);
   
   return (
      <>
         <h1>New Note</h1>
         <div className={css["editor-area"]} id="editorjs" />
      </>
   );
}