I have some problem in @react-pdf-viewer/highlight in React jsx

Question

I'm new here.

I can view PDF file on my website, but I can't highlight keywords in PDF and I don't figure out what problem is.

import { Worker, Viewer } from '@react-pdf-viewer/core';

import { pdfjs } from 'react-pdf';
import { highlightPlugin } from '@react-pdf-viewer/highlight';

import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/highlight/lib/styles/index.css';

this is a chatting robot bases on Lang chain.

so below is my code and I skip something irrelative to my main question "PDF HIGHLIGHT".

function App() {
  const [fileUrl, setFileUrl] = useState(null);
  const [keywords, setKeywords] = useState([]);
  const highlightPluginInstance = highlightPlugin({ keywords });

  useEffect(() => {
    console.log("highlightPluginInstance:", highlightPluginInstance);
  }, [highlightPluginInstance]);


  const handleSendMessage = async (e) => {
    


    .then(function (response){
      const resp = status === 200 ? response.data.response : '暫時無法解析您的問題';
      const source = response.data.source;

      if (response.data.source && response.data.source.length > 0) {
        // 如果有來源數據，那麼更新 sourceItems 和 sourceAvailable 的狀態
        setSourceItems(response.data.source);
        setSourceAvailable(true);

        const keywordsData = ['若三日'];
        setKeywords(keywordsData);


        response.data.source.forEach((sourceItem, index) => {
           const pattern = /01通則_all整理後_500\.csv/;

           if (pattern.test(sourceItem)) {

             setFileUrl("/path/to/doc.pdf");
             setSelectedIndex(index);

           }
        })

       }else {
          setSourceItems([]);
          setSourceAvailable(false);
       }
    }
  }
}

Next is 'return()'

return (
     {fileUrl && (
       <div style={{ width: '100%', height: '700px' }}> {/* 调整尺寸以适合您的布局 */}
              <Worker workerUrl={`//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`}>
                <Viewer 
                fileUrl={fileUrl} 
                plugins={[highlightPluginInstance]}
                onDocumentLoad={() => {
                  // 確保在文檔加載後再設置關鍵詞
                  setKeywords(keywords);
                }}/>
              </Worker>
            </div>
)}





{message.sourceAvailable && (
     <>
     <hr />
     <div className="mt-3 flex flex-row gap-2">
       {message.sourceItems.map((source, index) => (
           <button
            key={index}
            className="bg-gray-200 hover:bg-finalbluu text-black p-2 rounded btn-animate transition-custom"
            onClick={() => {
               setSelectedIndex(index);
               setCurrentSourceItems(message.sourceItems);
               setSourceOpen(true);
              }}>
                資料來源
              </button>
             ))}
)

p.s.: cuz the website includes voice function that needs to import react-mic, but it doesn't support react 18, it just support 16 (?) i'm not sure. Does someone have same problem?