How do I make ScriptTagger.js file re-run after updating the dom in react?

I want to use the following websites file:
https://www.blueletterbible.org/webtools/BLB_ScriptTagger.cfm
In the Website / Non-Wordpress Blog Installation section I have added the script in index.html as well as in the helmet and it works only with the already existing elements in the page.
For example if [Romans 1:16-18] was already there the script works fine. But that is not actually what I need.
If I get an API response from the backend that contains these Romans 1:16-18 or Zephaniah 3:17 and display them in my page the script doesnt work? How can I re run the script each time I get a response from the backend because the user can send multiple ones. I have tried to use a useEffect to remove the script and add it every time the users sends a request but in vain.
Any suggestions please?

 useEffect(() => {
      const script = document.createElement('script');
  
      script.src = "https://www.blueletterbible.org/assets-v3/scripts/blbToolTip/BLB_ScriptTagger-min.js";
      script.async = true;
        console.log("reload")
      document.body.appendChild(script);
  
      return () => {
        document.body.removeChild(script);
      }
    }, [chatLog]); 

BLB ScriptTagger exposes itself as BLB.Tagger on the global window object. You can call BLB.Tagger.pageInit() manually after each text change, so it will update the text.

Note: This might cause memory leaks, because BLB doesn't have any cleanup mechanism, but you'll need to profile and check it.

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

const { useState, useEffect } = React

const ps = ["This script will scan the text of your webpage for verse references such as this: Romans 1:16-18 or Jhn 3:16. It will then link them and automatically create and enable the hover.","You can set your preferred translation and various other settings. The script will also detect valid translation abbreviations connected with the reference, such as: Zephaniah 3:17 ESV","Other reference styles that this will automatically catch are: Deut 8:2-6, 10, 17-18 and Genesis 1:26-28; 3:15."]

const Demo = () => {
  const [paragraphs, setParagraphs] = useState([])
  
  useEffect(() => {
    const len = paragraphs.length;
    
    if(len < 3) {
      setTimeout(() => {
        setParagraphs(ps.slice(0, len + 1))
      }, 1000)
    }
  }, [paragraphs])
  
  useEffect(() => {
    if(paragraphs.length) {
      BLB.Tagger.pageInit()
    }
  }, [paragraphs]);
  
  return (
    <div>
      {paragraphs.map((p, i) => <p key={i}>{p}</p>)}
    </div>
  )
}

ReactDOM
  .createRoot(root)
  .render(<Demo />)

<!-- language: lang-html -->

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<script src='https://www.blueletterbible.org/assets-v3/scripts/blbToolTip/BLB_ScriptTagger.js' type='text/javascript'></script>
<script type='text/javascript'></script>

<div id="root"></div>

<!-- end snippet -->