rehype pluguns doesn't affected (XSS Vulnerable)

I try to implement this into my next js project using app next js version.

And I wanna try to test the security using this inside the string markdown;

<IFRAME SRC="javascript:javascript:alert(window.origin);"></IFRAME>

And this is my code.

import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import { useState } from "react";
import MDEditor from "@uiw/react-md-editor";
import rehypeSanitize from "rehype-sanitize";

const PostEditor = () => {
  const [value, setValue] = useState<string | undefined>(
    '**Hello world!!!** <IFRAME SRC="javascript:javascript:alert(window.origin);"></IFRAME>'
  );

  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
        previewOptions={{
          rehypePlugins: [rehypeSanitize],
          transformLinkUri: null,
          skipHtml: true,
        }}
      />
      <MDEditor.Markdown source={value} style={{ whiteSpace: "pre-wrap" }} />
    </div>
  );
};

export default PostEditor;

And then javascript dialog still up there.

How to avoid that dialog appear to our website, especially during production.

Start by reproducing the supplied iframe payload with the Next.js example, comparing the rehype configuration on MDEditor with the separate MDEditor.Markdown rendering path shown. Inspect the preview rendering entry point and verify that the payload cannot execute in production; add coverage for the affected behavior if the repository’s test structure supports it.