反应img onError未点火

我正在尝试使用第三方API获取分辨率更高的YouTube缩略图,有时代码404会失败。如果无法获取图像,我想用使用自己的API检索的默认YouTube缩略图替换src(我的url存储在json中)。当我尝试使用img onError事件实现此功能时,似乎在提取失败时不会触发任何内容。有人知道发生了什么事吗?谢谢

const TestView = () => {

    const videoId = "tuZty35Fk7M"

    return (
        <div>
            <img src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`} onError={() => {console.log("errored")}}></img>
        </div>
    )
}

更新:
最终效果很好

const TestView = () => {

    const videoId = "tuZty35Fk7M"
    const imgRef = useRef(null)
    const [thumbnailSrc, setThumbnailSrc] = useState(`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`)
    const defaultThumbnailSrc = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`

    const handleImgValidity = () => {
        if (imgRef.current.naturalHeight == 90) {
            setThumbnailSrc(defaultThumbnailSrc)
        }
    }

    return (
        <div>
            <img ref={imgRef} src={thumbnailSrc} onLoad={handleImgValidity}></img>
        </div>
    )
}