Here i created simple button when the button pressed given component is visible to in the screen and start timeInterval of 3 seconds but when the component is unmount then i return the clearInterval function but still the timeInterval didn’t stopped so here what is the problem? Here is the code

const ToggleComponent = () => {
  const timer = setInterval(() => {
    console.warn('3 Seconds');
  }, 3000);

  useEffect(() => {
    console.warn('Timer started');
    
  return () => {
    clearInterval(timer());
    console.warn('Timer ended');
  };
  });

  return(
    <Text style={{fontSize:20, color:'red'}}>Show Component</Text>
  );
}