title: React Quill in nextJS has a duplicate tab
body: <p>I have react-quill installed in my nextjs project
  The code is work but its have a bug where the tab is doubled
  <a href="https://i.stack.imgur.com/DSuhu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DSuhu.png" alt="bug" /></a></p>
  <p>i was so confused</p>
  <pre><code>import { useState } from &quot;react&quot;;
      import dynamic from &quot;next/dynamic&quot;;
      const ReactQuill = dynamic(() =&gt; import(&quot;react-quill&quot;), { ssr: false });
      import &quot;react-quill/dist/quill.snow.css&quot;;
      
      function App() {
        const [value, setValue] = useState(&quot;&quot;);
        const modules = {
          toolbar: [
            [{ header: &quot;1&quot; }, { header: &quot;2&quot; }, { font: [] }],
            [{ size: [] }],
            [&quot;bold&quot;, &quot;italic&quot;, &quot;underline&quot;, &quot;strike&quot;, &quot;blockquote&quot;],
            [
              { list: &quot;ordered&quot; },
              { list: &quot;bullet&quot; },
              { indent: &quot;-1&quot; },
              { indent: &quot;+1&quot; },
            ],
            [&quot;link&quot;, &quot;image&quot;, &quot;video&quot;],
            [&quot;clean&quot;],
          ],
          clipboard: {
            matchVisual: false,
          },
        };
      
        return (
          &lt;div&gt;
            &lt;ReactQuill
              value={value}
              onChange={setValue}
              theme='snow'
              modules={modules}
            /&gt;
          &lt;/div&gt;
        );
      }
      
      export default App;
  </code></pre>
  <p>can someone help to fix this issue?</p>