react codemirror 2 how to show the variables entered before

Question

I am using ReactCodemirror2 wrapper in order to bring a Javascript Editor to my ReactJS app. The thing is I can't figure it out how to reuse the defined variables, I mean this:

as you can see firstNumber does not appears on the autocompletion dialog. I did a research and I found that anyword-hint.js might do the trick, looking forward any previous written word. How can I tell the editor to use anyword-hint? Or there is any better way to use predefined variables?

Here is what I have:

import React from 'react';

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/abcdef.css';
import 'codemirror/theme/eclipse.css';
import 'codemirror/lib/codemirror';
import 'codemirror/theme/mbo.css';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/javascript-hint';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/keymap/sublime';
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/comment-fold';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/javascript-lint';
import { JSHINT } from 'jshint';
import { Controlled as CodeMirror } from 'react-codemirror2';

import 'codemirror/addon/hint/anyword-hint';

window.JSHINT = JSHINT;

export default function MyEditor(props) {
  const [options, setOptions] = useState({
    mode: 'javascript',
    lineWrapping: true,
    smartIndent: true,
    lineNumbers: true,
    foldGutter: true,
    gutters: [
      'CodeMirror-linenumbers',
      'CodeMirror-foldgutter',
      'CodeMirror-lint-markers'
    ],
    autoCloseTags: true,
    keyMap: 'sublime',
    matchBrackets: true,
    autoCloseBrackets: true,
    lint: true
  });

  const extraKeys = React.useMemo(() => ({
    'Ctrl-Space': 'autocomplete',
    Tab: 'autocomplete'
  }), []);

  useEffect(() => {
    const opt = { ...options };
    opt.extraKeys = extraKeys;
    setOptions(opt);
  }, []);

  return (
    <CodeMirror
      editorDidMount={editor => {
        
      }}
      value={code}
      options={options}
      onBeforeChange={(editor, data, value) => {
        
      }}
      onChange={(editor, data, value) => {

      }}

      className={height !== 0 ? classes.setHeight : null}
    />
  );
}

Answer 1

Remove React.StrictMode from index file that will resolve the issue, i'm still searching for the reason why it works that way