Как проверить, загружено ли изображение в элемент холста в React JS?

Question

Я создаю проект, используя Библиотеку эффектов наведения Робина Дела (NPM Ссылка ). Сама реализация очень проста, и она у меня работает. Мне просто нужно проверить, загружено ли изображение или нет, что я действительно не знаю, как это сделать. Я понимаю, что обычно люди используют метод image.onload, чтобы проверить, загружено ли изображение или нет, но, к сожалению, с этой библиотекой изображение хранится внутри элемента холста.

Я пробовал делать getContext('2d') и рисовать изображение на холсте, но к элементу холста нельзя получить доступ, пока библиотека не будет полностью инициирована, и к тому времени изображение будет нарисовано автоматически, так что я могу ' t нарисовать изображение вручную.

Так как же в этом конкретном случае будет работать проверка того, загружено ли изображение? Пример кода показан ниже:

    import React, { useState, useEffect, useRef, createRef } from "react";
    import hoverEffect from "hover-effect";
    let [loaded, setLoaded] = useState(false);
    const imageRef = useRef();

     useEffect(() => {
        new hoverEffect({
          parent: imageRef.current,
          intensity: 0.3,
          image1: "/images/pic1",
          image2: "/images/pic2",
          displacementImage: "/images/displacement.jpg",
          angle: Math.PI / 2,
          imagesRatio: 460 / 400,
        })

       setLoaded(!loaded)
  }, []);

  return (
    <React.Fragment>
              <div
                className='slide__img'
                ref={imageRef}
              ></div>
    </React.Fragment>
)

Большое спасибо за ваше время. Приветствуются любые идеи.