Preview by default in NextJS

[Aloysius999]

I've used successfully SimpleMDE in my NextJS project

import "easymde/dist/easymde.min.css";
import dynamic from "next/dynamic";
import { SimpleMdeToCodemirrorEvents } from "react-simplemde-editor";

const SimpleMDE = dynamic(() => import("react-simplemde-editor"), {
  ssr: false,
});

const mdeOptions = useMemo(() => {
  return {
    autofocus: true,
    toolbar: ["preview"],
    showIcons: [],
    hideIcons: [],
    status: false,
    initialValue: "hello world",
  } as EasyMDE.Options;
}, []);

const [simpleMDEEvents, setSimpleMDEEvents] =
  useState<SimpleMdeToCodemirrorEvents>({
    beforeChange: (instance: any, changeObj: any) => {
      console.log("beforeChange", changeObj);
      changeObj.canceled = true;
    },
  });

<SimpleMDE
  id="messageBody"
  // defaultValue={props.message}
  value={props.message}
  options={mdeOptions}
  events={simpleMDEEvents}
/>

But what I'd really like to do is open SimpleMDE in preview mode to use a markup viewer.

How can I do this?

Thanks