When the value passed in props changes, the content of the editor does not change

[xiaopujun]

Hi, thanks for packaging this library and making changes to monaco easier to use!

I used @monaco-editor/react: 4.2.1

When I change the value of the value property from editor and pass it to editor via props, the content of editor is not updated, But when I go to change the value via the useState hook, the content can be updated here is my code

export interface VsCodeEditorProps {
  value?: string
  onChange?: (value?: string) => void
  language?: "javascript" | "json"
  width?: string | number
  height?: string | number
  readonly?: boolean
}

export const VsCodeEditor: React.FC<VsCodeEditorProps> = (props) => {
  const { value, onChange, language, width, height, readonly = false } = props
  const monaco = useMonaco()
  useEffect(() => {
    if (monaco) {
      monaco.editor.addCommand({
        id: "editor.action.formatDocument",
        run: () => undefined,
      })
    }
  }, [monaco])

  return (
    <div style={{ width, height, border: "1px solid #414141" }} className={"monaco-editor-container"}>
      <Editor
        defaultLanguage={language || ""}
        theme="vs-dark"
        onChange={onChange}
        height={"100%"}
        width={"100%"}
        options={{
          minimap: { enabled: false },
          quickSuggestions: false,
          folding: false,
          readOnly: readonly,
        }}
        loading={<div>Loading...</div>}
        value={value || ""}
      />
    </div>
  )
}

I'm not sure if this is a bug or not, but he really doesn't quite fit the flow of how the component works properly

Looking forward to hearing from you.

[eokoneyo]

@xiaopujun I think you'd want to create this here https://github.com/suren-atoyan/monaco-react instead