How to toggle shake animation on scroll only when a specific page level is reached, using react hooks or css?

Question

I need help with shaking animation on my picture. The idea is that I would like to toggle shake animation only if the all picture became visible on the page. I try to do it in the code below but it is not working, I am using the reshake package and actually, the animation happens only if hover on it.

App:

import React, { useState} from "react";
import { ShakeRotate } from "reshake";

const App = () => {
  const [shake, setShake] = useState(false);

  const toggleShake = () => {
    if (window.scrollY >= 30) {
      setShake(true);
    } else {
      setShake(false);
    }
  };

  window.addEventListener("scroll", toggleShake);

  return (
      <div className="app">
        <ShakeRotate className={shake && "sc-furwcr fZevBE mobile_png"} h={15}>
          <img src="/images/mobile.png" className="mobile" alt="mobile" />
        </ShakeRotate>
      </div

app.css:

.app {
  position: absolute;
  top: 21%;
  left: 80%;
  transform: translate(-50%, -50%);
}
.mobile {
  height: 350px;
  width: 200px;
}