En mi código anterior, estaba creando una nueva función setInterval antes de borrarla. Sin embargo, el problema real era que cada vez que se configura setInterval, se crea una nueva ID para ese setInterval. Aunque almacene setInterval en una variable, cada vez que crea el setInterval obtiene una nueva ID y pierde la referencia a la anterior que aún existe en la memoria .

Para combatir esto, al final de mi código donde configuro el estado, paso la variable que es igual a setInterval al estado. Entonces, si la variable era igual a 33 , esto se pasaba al estado. Cuando borro el intervalo, hago referencia a este ID en el estado.

 // Called when user clicks on menu item const loadQueueStatus = async () => { // This function will fetch queueStatus data const queueStatus = async () => { // eslint-disable-next-line const queueStatus = await getQueueStatus().then((data) => { this.setState({queueStatus: data}) }); } // call the queue right away if the menu just opened, we know if it is opened as state would still say false // We do this so we don't wait 5 seconds for the first fetch. let setIntervalFunction if(!this.state.isVolunteerStatusOpen) { queueStatus() setIntervalFunction = setInterval( queueStatus, 5000); } console.log(setIntervalFunction) //Set a listener, to pole the data while menu is open // If the menu is closed, the state will be true, if so, clear the listener if(this.state.isVolunteerStatusOpen) { console.log("clearing listener") clearInterval(this.state.setIntervalFunction); } // Inform state of status window status for next click this.setState({ isVolunteerStatusOpen: !this.state.isVolunteerStatusOpen, setIntervalFunction: setIntervalFunction //Stores reference to setInterval so it can be cleared next time function is called. }) }