I am trying to implement a counter using react but cant seem to be able to clear the intervals properly

I am fairly new to react and started out with a basic project but I'm struggling with a counter application that I am trying to make wherein the auto increment and the auto decrement function perform simultaneously so the count is not functioning properly. Any help would be appreciated. Thanks in advance.

intervalId is a variable that has been defined globally in the component. The button click handlers are as mentioned below.

const stopInterval = () => {
    clearInterval(intervalId);
    intervalId = null;
  };
 const handleAutoDecrement = () => {
    stopInterval();
    if (!intervalId) {
      intervalId = setInterval(() => {
        setCounter((prev) => prev - 1);
      }, 1000);
    }
  };

  const handleAutoIncrement = () => {
    stopInterval();
    if (!intervalId) {
      intervalId = setInterval(() => {
        setCounter((prev) => prev + 1);
      }, 1000);
    }
  };  

I tried clearing the intervals in a return call back prior to this but got the same result so I am completely clueless so as to do what now.

You are storing intervalId in local variable and after every re-render its value gets undefined. You will have to store the value in a state so that when counter value changes and it renders again it must persist the intervalId value.

import React, { useState } from 'react';
import './style.css';
function CounterComponent() {
const [counter, setCounter] = useState(0);
const [intervalId, setintervalId] = useState();
const stopInterval = () => {
clearInterval(intervalId);
setintervalId();
};
const handleDecrement = () => {
setCounter((prev) => prev - 1);
};
const handleAutoDecrement = () => {
stopInterval();
// if (!intervalId) {
setintervalId(setInterval(() => {
setCounter((prev) => prev - 1);
}, 1000));
console.log('interca', intervalId);
// }
};
const handleAutoIncrement = () => {
stopInterval();
// if (!intervalId) {
setintervalId(setInterval(() => {
setCounter((prev) => prev + 1);
}, 1000));
// }
};
const handleIncrement = () => {
setCounter((prev) => prev + 1);
};
return (
<>
<div className="counterClass">{counter}</div>
<br />
<br />
<button onClick={handleDecrement} className="decrementButton">
Decrement
</button>
<button onClick={handleAutoDecrement} className="autoDecrementButton">
AutoDecrement
</button>
<button onClick={handleAutoIncrement} className="autoIncrementButton">
AutoIncrement
</button>
<button onClick={handleIncrement} className="incrementButton">
Increment
</button>
<button onClick={stopInterval} className="incrementButton">
Stop
</button>
</>
);
}
export default CounterComponent;