Im implementing a simple timer, and using use effect to run a function everytime my count decrements by 1.

I have a button that when pressed, changes the count state to 10 (so the idea is that if the count is currently 6, by pressing this button it should go back to 10 and start decreasing again).

The timer is working fine, but when i press the button, it creates another state, but it doesnt update the original one.

Example:

*starts count on 10*

```
10

9

8

7

```

*I press the button to go back to 10*

```
6     10

5     9

4     8 

```

That's what's happening. I don't know why the useEffect gets stuck with the old state.

Here's my code:

```
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import Button from "react-bootstrap/Button";

export default function PagTimer() {
  let history = useHistory();
  const [contador, setContador] = useState(10);

  const AddTime = () => {
    setContador(10);
  };
  const Descontar = () => {
    const timer = setTimeout(() => {
      setContador(contador - 1);
    }, 1000);
  };

  useEffect(() => {
    if (contador === 0) {
      history.push("/");
    } else {
      Descontar();
    }
  }, [contador]);

  return (
    <div>
      <h1>{contador}</h1>
      <Button onClick={AddTime} variant="outline-primary">
        Add Time
      </Button>
    </div>
  );
}

```

Here's the sandbox, so it's easier to see the example: <https://codesandbox.io/s/awesome-wiles-oqh71?file=/src/App.js>