api inside setInterval hitting twice

Question

I'm trying to hit an api after every set interval, but what's happening is the api is being hit twice / dispatch being called twice. am I doing it right? if not then what can be the other ways

have a look

const Agent = (props: RouteComponentProps) => {
  let dispatch = useDispatch();
  const [clicks, setClicks] = useState(0);

  const handleOnAction = () => {
    console.log("user did something", clicks);
    setClicks(clicks + 1);
  };

  const {
    getRemainingTime,
    getLastActiveTime,
    getTotalIdleTime,
  } = useIdleTimer({
    timeout: 10000,
    onIdle: handleOnIdle,
    onActive: handleOnActive,
    onAction: handleOnAction,
    debounce: 500,
  });

  useEffect(() => {
    let timer = setInterval(async () => {
      setClicks((currentClicks) => {
        dispatch(setScore(currentClicks));
        console.log("set clickes twice");
        return 0;
      });
    }, 1000 * 30);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <AgentLayout>
      <div className="dashboard-wrapper py-3">
        component
      </div>
    </AgentLayout>
  );
};

export default Agent;