title: React Ace Editor value not showing
body: <p>I'm looking to display some code through the value props in my react component but the editor just stays blank and does not show any values. I can type within the editor and everything seems to be working, including syntax highlighting. No errors in sight. Am I missing something obvious?</p>
  <p>I should note, I'm using next.js and react-ace as shown here:
  <a href="https://github.com/mingderwang/ace-editor-with-next" rel="nofollow noreferrer">https://github.com/mingderwang/ace-editor-with-next</a></p>
  <p>Here is my main index.js page code:</p>
  <pre><code>import dynamic from &quot;next/dynamic&quot;;
  const CodeEditor = dynamic(import(&quot;../components/codeEditor&quot;), { ssr: false });
  
  export default () =&gt; {
    return (
      &lt;div&gt;
        &lt;CodeEditor value={&quot;for (var i=0; i &lt; 10; i++) {\n  console.log(i)\n}&quot;} /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>And here is the Ace CodeEditor component code:</p>
  <pre><code>import ReactAce from &quot;react-ace-editor&quot;;
  import React from &quot;react&quot;;
  
  function CodeEditor(props) {
    return (
      &lt;ReactAce
        value={props.value}
        mode=&quot;javascript&quot;
        theme=&quot;xcode&quot;
        setReadOnly={false}
        style={{
          height: &quot;500px&quot;,
          fontSize: &quot;16px&quot;,
        }}
      /&gt;
    );
  }
  export default CodeEditor;
  </code></pre>