I have an array of entities mapped, and a different timer is started for each. But when the time expires, both are reset (the callback function is executed that the time is up), but you want the other timers to continue running until their time runs out. I used useRef() but it doesn’t help. Please tell me what I’m doing wrong

const ParentComp = () => <div>
   {
       items.map((el, i) => <ChildComp endTimeCb={}/>)
   }
</div>

const ChildComp = ({endTimeCb}) => {
const timeoutId: any = useRef();
const [isRunning, setIsRunning] = useState(true);
useEffect(() => {
    console.log('use', isRunning, minutesDiff)
    if (isRunning) {
        timeoutId.current = setInterval(() => {
            setCurrentDate(() => {
                console.log(minutesDiff)
                if (minutesDiff < 0) {
                    endTimeCb && endTimeCb();
                    setIsRunning(false);
                }
                return new Date().getTime();
            })
        }, 1000);
        return () => clearInterval(timeoutId);
    } else {
        console.log('cb')
        endTimeCb();
    }
}, [isRunning, minutesDiff, endTimeCb]);

return <></>
}