Q: clearInterval not working with set interval stored in Context React I have a simple context provider with timer state and functions that set interval to increase state and stopinterval that should clearInterval. clearInterval is not working.
Here is my code:
import React, { useState, useContext } from "react";

const Timer = React.createContext();

const StartTimer = React.createContext();

const StopTimer = React.createContext();

export function getTimer()
{
  return useContext(Timer);
}

export function useStartTimer()
{
  return useContext(StartTimer);
}

export function useStopTimer()
{
  return useContext(StopTimer);
}

export function TimerProvider({ children })
{
  const [timer, setTimer] = useState(0);

  const startTimer = () => setInterval(() => setTimer((prevState) => prevState + 0.5), 500);

  const stopTimer = () => clearInterval(startTimer);

  return (
    <Timer.Provider value={timer}>
      <StartTimer.Provider value={startTimer}>
        <StopTimer.Provider value={stopTimer}>
          {children}
        </StopTimer.Provider>
      </StartTimer.Provider>
    </Timer.Provider>
  );
}

