Как сделать чтобы когда блок растягивался, Loader анимировался React?

Question

[DevEugene]

Нужно передать обработчик событий в Loader при растягивании div. Сейчас просто заполняется при setTimout, а нужно чтобы при взаимодействии как то реагировал(мигал, менял цвет, хоть что-нибудь).
Resizeable.jsx

function ResizeableDiv() {
    const refBox = useRef(null)
    const refRight = useRef(null)
    const refLeft = useRef(null)

    useEffect(() => {
        const resizeableElement = refBox.current
        const styles = window.getComputedStyle(resizeableElement)
        let width = parseInt(styles.width, 10)
        let xCord = 0

        resizeableElement.style.top = "150px"
        resizeableElement.style.left = "150px"


//RIGHT
        const onMouseMoveRightResize = (event) => {
            const dx = event.clientX - xCord
            width = width + dx
            xCord = event.clientX
            resizeableElement.style.width = `${width}px`
        }
        const onMouseUpRightResize = (event) => {
            document.removeEventListener("mousemove", onMouseMoveRightResize)
        }
        const onMouseDownRightResize = (event) => {
            xCord = event.clientX
            resizeableElement.style.left = styles.left
            resizeableElement.style.right = null
            document.addEventListener("mousemove", onMouseMoveRightResize)
            document.addEventListener("mouseup", onMouseUpRightResize)
        }
//LEFT
        const onMouseMoveLeftResize = (event) => {
            const dx = event.clientX - xCord
            width = width - dx
            xCord = event.clientX
            resizeableElement.style.width = `${width}px`
        }
        const onMouseUpLeftResize = (event) => {
            document.removeEventListener("mousemove", onMouseMoveLeftResize)
        }
        const onMouseDownLeftResize = (event) => {
            xCord = event.clientX
            resizeableElement.style.right = styles.right
            resizeableElement.style.left = null
            document.addEventListener("mousemove", onMouseMoveLeftResize)
            document.addEventListener("mouseup", onMouseUpLeftResize)
        }

        //Mouse down event listener


        const resizerRight = refRight.current
        resizerRight.addEventListener("mousedown", onMouseDownRightResize)

        const resizerLeft = refLeft.current
        resizerLeft.addEventListener("mousedown", onMouseDownLeftResize)

        return () => {
            resizerRight.removeEventListener("mousedown", onMouseDownRightResize)
            resizerLeft.removeEventListener("mousedown", onMouseDownLeftResize)
        }
    }, []);


    return (
        <div className="wrapper">
            <div ref={refBox} className="resizeable-box" >
                <div ref={refLeft} onClick={handleClick} className="resizer  rl">
                    <TournamentItem/>
                </div>
                <div ref={refRight} className="resizer rr"></div>
            </div>
        </div>

    );
}

Loader.jsx

const Loader = ({done}) => {
    const [style, setStyle] = useState({});



    setTimeout(() => {
        const newStyle = {
            opacity: 0.8,
            width: `${done}%`
        }

        setStyle(newStyle);
    }, 300);

    return (
        <div className="progress">
            <div className="progress-done" style={style}>
                {done}%
            </div>
        </div>
    )
}