Is there a way to make ReactQuill not overlap other elements?

Question

I hope you have a keen eye to see what I am missing or not doing right. I am trying to integrate ReactQuill editor into my app, and it is behaving as expected except for one little detail. Typing and populating the editor with words (texts) seem to overlap other elements on the page (please see the gif link below).

https://www.canva.com/design/DAGLlDp6S4U/_FjMD1taR0pld9OPVx6qwQ/edit?utm_content=DAGLlDp6S4U&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

What I have done is set the minHeight, maxHeight, Overflow as shown in the following:

min-h-48 max-h-96 overflow-y-auto mb-5

But the issue continue to persist. Below is a copy of the code snippet:

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const BlogPage = () => {
  const [articleData, setArticleData] = useState({
    articleTitle: '',
    categoryNiche: '',
    articleBody: {
      articleContent: {
        bodyContent: '',
        bodyImage: null,
      },
    },
    coverImage: null,
  });
  const [wordCount, setWordCount] = useState(0);

  const countWords = (text) => {
    const words = text.replace(/<[^>]*>/g, '').trim().split(/\s+/);
    return words.filter(word => word.length > 0).length;
  };

  const handleBodyChange = (content, delta, source, editor) => {
    const text = editor.getText();
    setArticleData({
      ...articleData,
      articleBody: {
        ...articleData.articleBody,
        articleContent: {
          ...articleData.articleBody.articleContent,
          bodyContent: content,
        },
      },
    });
    setWordCount(countWords(text));
  };

  return (
    <>
      <div>
        <div className="my-4">
          <h2 className="text-base font-semibold leading-7 text-gray-900">
            Write an article
          </h2>
          <p className="mt-1 max-w-2xl text-sm leading-6 text-gray-600">
            Use the entries below to compose and publish your article. Need inspiration? Check out the tools in the right column. Avoid writers block with our AI-powered brainstorming tool, blogging tips, and monetization features.
          </p>
          <div className="mt-10 space-y-8 border-gray-900/10 pb-1 sm:space-y-0 sm:border-t sm:pb-0">
            <div className="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
              <label
                htmlFor="title"
                className="block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5"
              >
                Article Title
              </label>
              <div className="mt-2 sm:col-span-2 sm:mt-0">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-green-600 sm:max-w-md">
                  <input
                    id="title"
                    name="title"
                    type="text"
                    onChange={(e) =>
                      setArticleData({
                        ...articleData,
                        articleTitle: e.target.value,
                      })
                    }
                    value={articleData.articleTitle}
                    placeholder="Give your article a title"
                    autoComplete="title"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
                  />
                </div>
              </div>
            </div>
            <div className="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
              <label
                htmlFor="cover-photo"
                className="block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5"
              >
                Cover photo
              </label>
              <div className="mt-2 sm:col-span-2 sm:mt-0">
                <div className="flex max-w-2xl justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
                  <div className="text-center">
                    <PhotoIcon
                      aria-hidden="true"
                      className="mx-auto h-12 w-12 text-gray-300"
                    />
                    <div className="mt-4 flex text-sm leading-6 text-gray-600">
                      <label
                        htmlFor="file-upload"
                        className="relative cursor-pointer rounded-md bg-white font-semibold text-green-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-green-600 focus-within:ring-offset-2 hover:text-green-500"
                      >
                        <span>Upload a file</span>
                        <input
                          id="file-upload"
                          name="file-upload"
                          onChange={handleFileChange}
                          type="file"
                          className="sr-only"
                        />
                      </label>
                      <p className="pl-1">or drag and drop</p>
                    </div>
                    <p className="text-xs leading-5 text-gray-600">
                      PNG, JPG, GIF up to 10MB
                    </p>
                    {articleData.coverImage && (
                      <img
                        src={articleData.coverImage}
                        alt="Cover"
                        className="mt-4 h-40 w-40 object-contain"
                      />
                    )}
                  </div>
                </div>
              </div>
            </div>
            <div className="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6 mb-3">
              <label
                htmlFor="niche"
                className="block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5"
              >
                Your Niche
              </label>
              <div className="mt-2 sm:col-span-2 text-gray-700 sm:mt-0">
                <span>Current category: {niche}</span>
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-green-600 sm:max-w-md">
                  <input
                    id="niche"
                    name="niche"
                    type="text"
                    onChange={(e) =>
                      setArticleData({
                        ...articleData,
                        categoryNiche: e.target.value,
                      })
                    }
                    value={articleData.categoryNiche}
                    placeholder="Please enter your niche within this category."
                    autoComplete="niche"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-700 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
                  />
                </div>
              </div>
            </div>
            <div className="block">
              <div className="w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
                <div className="flex items-center justify-between px-3 py-2 border-b dark:border-gray-600">
                  <div className="flex items-center space-x-1 rtl:space-x-reverse">
                  </div>
                </div>
                <div className="px-4 py-2 bg-white rounded-b-lg dark:bg-gray-800">
                  <label htmlFor="editor" className="sr-only">
                    Publish post
                  </label>
                  <ReactQuill
                    value={
                      articleData.articleBody.articleContent.bodyContent
                    }
                    onChange={handleBodyChange}
                    modules={{
                      toolbar: [
                        [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        ['bold', 'italic', 'underline'],
                        [{ 'align': [] }],
                        ['link', 'image'],
                        ['clean']
                      ],
                    }}
                    formats={[
                      'header', 'font', 'list', 'bullet', 'bold', 'italic', 'underline', 'align', 'link', 'image'
                    ]}
                    className="min-h-48 max-h-96 overflow-y-auto mb-5 block w-full px-0 text-sm text-gray-800 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400 "
                    placeholder="Start your article here..."
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <span className="mt-1 mb-1 text-gray-400 text-xs">
          Your article must be at least 600 word count at the minimum
        </span>
        <span className={`mt-1 mb-1 ${wordCount >= 600 ? 'text-green-500' : 'text-red-500'} text-xs`}>
          Current word count: {wordCount}
        </span>
      </div>
    </>
  );
};

export default BlogPage;