youtube-react | A Youtube clone built in React , Redux , Redux-saga | User Interface library

I'm a fledgling developer and I'm trying to design an SPA in React that uses YouTube API to retrieve data. Using that data it tracks whether or not users have watched a video. I do this by calculating the percentage watched using some simple math that updates every five seconds with setInterval. I'm doing all this in combination with a npm package called "react-youtube."

Inside the component I have a function called generatePercent() that grabs the event data as per the react-youtube documentation, and generates the percentage, this is triggered when the user hits play on the video. Unfortunately, I can't get this interval to clear when a user hits pause. Worse yet, the app seems to be generating multiple instances of setInterval as well.

I've tried everything from placing this in the ComponentDidMount/ComponentWillUnmount to using tracking the state of the player inside the state of the app and using if/else statements to say the movie is paused then clear the interval. I've looked at plenty of examples on reactjs.org and other similar issues on this site and nothing is working. I'm probably just not noticing something easy, but I'm genuinely at a loss. A lot of the problems seem to be stemming from the fact that I have to tap into event.target.property-of-the-thing-i-want as per the youtube-react documentation, and that's causing a few headaches for me to retrieve it otherwise. Any help would very, very appreciated.