Issues when using Next and Sanity Studio about sanity-plugin-markdown HOT 3 OPEN

export const MarkdownInput = React.forwardRef(
  (props: MarkdownInputProps, ref: React.MutableRefObject<any>) => {
    const {
      value = '',
      onChange,
      elementProps: { onBlur, onFocus },
      reactMdeProps: { options: mdeCustomOptions, ...reactMdeProps } = {},
      schemaType,
    } = props;
    const client = useClient({ apiVersion: '2022-01-01' });
    const { imageUrl } =
      (schemaType.options as MarkdownOptions | undefined) ?? {};

    const imageUpload = useCallback(
      (
        file: File,
        onSuccess: (url: string) => void,
        onError: (error: string) => void,
      ) => {
        client.assets
          .upload('image', file)
          .then((doc) =>
            onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`),
          )
          .catch((e) => {
            console.error(e);
            onError(e.message);
          });
      },
      [client, imageUrl],
    );

    const mdeOptions: EasyMdeOptions = useMemo(() => {
      return {
        autofocus: false,
        spellChecker: false,
        sideBySideFullscreen: false,
        uploadImage: true,
        imageUploadFunction: imageUpload,
        toolbar: defaultMdeTools,
        status: false,
        ...mdeCustomOptions,
      };
    }, [imageUpload, mdeCustomOptions]);

    const handleChange = useCallback(
      (newValue: string) => {
        onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
      },
      [onChange],
    );

    return (
      <MarkdownInputStyles focused={props.focused}> // Added some focused styles for this component
        <SimpleMdeReact
          {...reactMdeProps}
          ref={ref}
          value={value}
          onChange={handleChange}
          onBlur={onBlur}
          onFocus={onFocus}
          options={mdeOptions}
          spellCheck={false}
        />
      </MarkdownInputStyles>
    );
  },
);