highlightSelectionMatches not working

[Shivansh-5]

trafficstars

Hi, It is mentioned in the docs that after importing this file 'codemirror/addon/search/match-highlighter', this 'highlightSelectionMatches' option can be added which can be enabled to highlight all instances of the selected word, but this does not work.

This is the code, I don't know if I am doing something wrong:

import React from 'react';

import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/theme/material.css';
import 'codemirror/lib/codemirror.css';
import "codemirror/mode/jsx/jsx";
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/hint/javascript-hint';
import 'codemirror/addon/hint/show-hint.css';
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/selection/active-line";
import 'codemirror/addon/fold/comment-fold';
import 'codemirror/addon/fold/foldgutter.css';
import './App.css';
import 'codemirror/addon/search/match-highlighter';

function CodeEditor() {
  const [code, setCode] = React.useState('// my code goes here');
  return (
    <CodeMirror
      className='CodeMirror'
      value={code}
      options={{
        mode: 'jsx',
        theme: 'material',
        lineWrapping: true,
        smartIndent: true,
        lineNumbers: true,
        autofocus: true,
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        autoCloseTags: true,
        highlightSelectionMatches: true,
        styleActiveLine: true,
      }}
      onBeforeChange={(editor, data, value) => {
        editor.showHint({
          completeSingle: false,
          closeOnPick: false,
        });
        setCode(value);
      }}
    />
  );
}

export default CodeEditor;