How to render codeblocks in MDXEditor?

Question

I'm trying to use MDXEditor as my markdown editor in my app but when I'm trying to write some code snippets it doesn't work I mean it wont transform it to a html code tag and also I don't know what to do with the links because I cannot click on them, the documentation recommends using linkDialogPlugin but it's not shown properly I mean the position of the dialog is not right, I guess this is because I'm using tailwindcss. here is my code of MDXEditor:

<MDXEditor
      ref={editorRef}
      key={selectedNote.title}
      autoFocus
      onChange={handleAutoSaving}
      markdown={selectedNote.content}
      onBlur={handleBlur}
      plugins={[
        headingsPlugin(),
        listsPlugin(),
        quotePlugin(),
        codeBlockPlugin({
          defaultCodeBlockLanguage: 'js'
        }),
        codeMirrorPlugin({
          theme: 'dark',
          codeBlockLanguages: { js: 'JavaScript', css: 'CSS' }
        }),
        linkPlugin(),
        markdownShortcutPlugin()
      ]}
      contentEditableClassName="outline-none min-h-screen max-w-none text-lg px-8 py-5 caret-yellow-500 
      prose prose-invert prose-p:my-3 prose-p:leading-relaxed prose-headings:my-4 prose-blockquote:my-4
       prose-ul:my-2 prose-li:my-0 prose-code:px-1 prose-code:text-red-500 prose-code:before:content-['']
       prose-code:after:content-[''] prose-a:text-blue-500 prose-a:hover:underline"
    />