Static build outputs `[object Object],[object Object],[object Object]` if value prop is set initially

Start with the CodeEditor.tsx reproduction using an initial string value, then compare the live-server output with the statically built HTML shown in the issue. Trace why the generated pre/code content becomes [object Object] during the static build; done when the editor preserves the supplied string value in static output.

Thanks for the awesome and simple to use package. I like it, since it's very simple and it suits my needs perfectly. However, I stumbled upon an issue that I can't seem to get rid of.

If I give CodeEditor an initial value (see code sample below), then when building the project into static files it will display [object Object],[object Object],[object Object] in the editor.

I first thought it had something to do with the state. I initially had a useState and passed the value of that state to the value prop of the editor. But after some inspection, I found that even if the value prop is set to a simple string, it will still render [object Object],[object Object],[object Object] inside the editor.

This only occurs when I build the project into static files. During the development with the live server, this bug does not occur.

Package Version: 1.4.16
Vite version: 2.8.0

Component CodeEditor.tsx:

import { ChangeEvent } from "react";
import { useMantineTheme } from "@mantine/core";

import CodeEditor from '@uiw/react-textarea-code-editor';
import "@uiw/react-textarea-code-editor/dist.css";

type Props = {
    query: string | null,
    setQuery: (value: string) => void,
};
const Editor = ({ query, setQuery }: Props) => {
    const theme = useMantineTheme();

    return (
        <CodeEditor
            value={`SELECT *`}
            language="sql"
            placeholder="Enter a SQL query."
            onChange={(evn: ChangeEvent<HTMLTextAreaElement>) => setQuery(evn.target.value)}
            padding={theme.spacing.md}
            style={{
                height: '100%',
                fontSize: theme.fontSizes.lg,
                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : "white",
                border: theme.colorScheme === 'dark' ? 'none' : `1px solid ${theme.colors.gray[4]}`,
                borderRadius: theme.radius.sm,
                resize: 'none',
                overflowY: 'auto',
                fontFamily:
                    "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
            }}
        />
    );
};

export default Editor

Rendered HTML:

<pre aria-hidden="true" class=" language-sql" tabindex="0">
  <code class=" language-sql">
    [object Object],[object Object],[object Object]
  </code>
  <br>
</pre>

Output: