如何使用react在ace编辑器中删除所有现有的突出显示标记

import React, { useEffect, useRef } from 'react';
import ace from 'ace-builds';
import 'ace-builds/src-noconflict/ext-searchbox';
import 'ace-builds/src-noconflict/ext-language_tools';

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    const editor = ace.edit(editorRef.current);
    editor.session.setMode('ace/mode/javascript');
    editor.setTheme('ace/theme/tomorrow');

    // 添加你的其他ACE编辑器配置和初始化代码

    return () => {
      editor.destroy();
    };
  }, []);

  return <div ref={editorRef} style={{ height: '500px' }}></div>;
};

const removeHighlight = () => {
  const editor = ace.edit(editorRef.current);
  const markers = editor.session.getMarkers();

  for (const markerId in markers) {
    if (markers.hasOwnProperty(markerId)) {
      editor.session.removeMarker(markers[markerId].id);
    }
  }
};

const MyEditor = () => {
  // ...

  const handleRemoveHighlight = () => {
    removeHighlight();
  };

  return (
    <div>
      <div ref={editorRef} style={{ height: '500px' }}></div>
      <button onClick={handleRemoveHighlight}>删除所有标记</button>
    </div>
  );
};