exhaustive-deps false positives or my bug?

let innerTimeout
let outerTimeout

/*
 * A box for appearing status messages
 */
const StatusBox = ({content, setContent, timeout, type}) => {
    const div = React.useRef(null)
    const [opacity, setOpacity] = React.useState(0)
    const [className, setClassName] = React.useState(type)

    const handleClick = e => {
        e.preventDefault()
        clear()
    }

    const clear = React.useCallback((e) => {
        console.debug("StatusBox: Clearing opacity, currently:", opacity)
        setOpacity(0)
        /*
         * If we remove the class now, it'll cut short the fade-out.
         * If we remove the text now, it'll disappear abruptly before the
         * fade-out.
         *
         * HOWEVER, if we DON'T clear the text, then the overlay is still
         * there, blocking the page (in the case of a bigger status), so
         * we need to clear it after the transition. So get the timing of
         * that, and add 50ms just to be safe. And while we're at it,
         * we can clear the classes...
         */
        let t = window.getComputedStyle(div.current).transitionDuration
        console.debug("StatusBox: computed transition", t)
        // that's something like 0.4s, we need to drop the 's', convert
        // to a number, and the turn into milliseconds. Trying to use a
        // string in a math equation causes JS to cast it for you
        t = t.replace('s', '') * 1000
        t += 50
        console.debug("StatusBox: Setting timeout to clear type/content in", t)
        innerTimeout = window.setTimeout(() => {
            setContent(null)
        }, t)
    }, [setContent, opacity])

    React.useEffect(() => {
        console.debug(
            `StatusBox: in useEffect, timeout ${timeout}`
        )
        // If we're setting content to null, we've already set the opacity
        // so we can return null to not re-render
        if (content == null) {
            return null
        }

        // otherwise, we need to appear!
        console.debug("StatusBox: setting opacity to 1")
        setOpacity(1)

        // if we have no timeout, we're done
        if (timeout == null) {
            return
        }

        // otherwise, set the timeout
        console.debug('StatusBox: setting timeout for', timeout)
        // nuke any timeout already there
        if (innerTimeout) {
            console.debug("clearing inner:", innerTimeout)
            window.clearTimeout(innerTimeout)
        }
        if (outerTimeout) {
            console.debug("clearing outer:", innerTimeout)
            window.clearTimeout(outerTimeout)
        }
        outerTimeout = window.setTimeout(clear, timeout)
    }, [content])

    return <div
        className={type}
        ref={div}
        id='status'
        style={{opacity:opacity}}
        onClick={handleClick}
    >{content}</div>
}