react-animarker highlight not updating with state change

Question

I have some text that I want to simply highlight using a simple react package called 'react-animarker'. I have tried to use useState hook as I want to dynamically update the speed of the animation as shown. However, the duration does not change the way I want it to. But in the console, it does show as changing. Any ideas as to why?

Link to React Package: https://github.com/ramonmetzker/react-animarker

import React, {useState} from 'react'
import {Mark} from 'react-animarker'


const Highlightx = () => {

    const [speed, setSpeed] = useState(5)

    const handleClick = () => {
        setSpeed(20)
        console.log(speed);
    }  

  return (
    <>
    <Mark duration={speed}>Highlightx</Mark>
    <button onClick={handleClick}>Hello</button>
    </>
  )
}

export default Highlightx

Answer 1

After taking a look at the library you are using, I found a solution:

For some reason, React does not see any state change with the <Mark> component when the duration property changes, therefore, React does not force a refresh of the component. If you add a key property that changes with the duration, then it will force a re-render of the Mark component and re-draw your highlight.

ex:

<Mark key={speed} duration={speed}>

Here is simple example in codesandbox (simply change the value of the input field and the highlight will re-draw after each change): example