React Quill in nextJS has a duplicate tab

I have react-quill installed in my nextjs project The code is work but its have a bug where the tab is doubled

i was so confused

import { useState } from "react";
    import dynamic from "next/dynamic";
    const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
    import "react-quill/dist/quill.snow.css";
    
    function App() {
      const [value, setValue] = useState("");
      const modules = {
        toolbar: [
          [{ header: "1" }, { header: "2" }, { font: [] }],
          [{ size: [] }],
          ["bold", "italic", "underline", "strike", "blockquote"],
          [
            { list: "ordered" },
            { list: "bullet" },
            { indent: "-1" },
            { indent: "+1" },
          ],
          ["link", "image", "video"],
          ["clean"],
        ],
        clipboard: {
          matchVisual: false,
        },
      };
    
      return (
        <div>
          <ReactQuill
            value={value}
            onChange={setValue}
            theme='snow'
            modules={modules}
          />
        </div>
      );
    }
    
    export default App;

can someone help to fix this issue?