EditorJS not usable even though clearly it is in my program

Question

I am trying to integrate EditorJS with Tauri + React. I got the editor inside of my program but I cannot use any of the tools that EditorJS provides even though the editor is clearly in my program. I can interact with the editor (I am only able use the blue selecting feature) as shown in the picture but I cannot access any of the other features. Also the editor is only interactable in that small blue area. So if I click anywhere in the program I cannot in interact with it. So I would like to make the editor the right size and also usable.

Here is the code of the page:

import React, { useRef, useEffect } from 'react';
import { Container, Props } from './styles';
import EditorJS from '@editorjs/editorjs';

const HomePage: React.FC<Props> = ({ pageName, visible }) => {
  const editorRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (editorRef.current) {
      const editor = new EditorJS({
        holder: editorRef.current,
        // Add your EditorJS configuration options here
      });
    }
  }, []);

  return (
    <Container className={`app-container-column ${visible ? '' : 'hide-page'}`}>
      <h1>Why can I do this?</h1>
      <div id="editorjs" ref={editorRef}></div>
      <h2>new</h2>
    </Container>
  );
};

export default HomePage;

To help you better understand the problem, I have created a CodeSandbox environment of the program that I have. Here is the link: EditorJs Program CodeSandbox

I kindly request you to take a look and provide any insights or suggestions you may have. Thank you in advance for your time and support.