title: Restart timer component with new duration after onComplete event in React
body: <p>Using <code>react-countdown-circle-timer</code> to render a countdown timer. Trying to create an event handler that changes the duration of the timer each time the timer reaches zero.</p>
  <p>The clock initially runs down from 5 seconds, when it reaches zero I change the state, then use this to change the new value assigned to the clock.</p>
  <p>For a more practical example. When the clock initially runs to zero, I change my <code>stage</code> state to 2, setting the timer to 6 seconds. When this clocks runs down, I change my <code>stage</code> state to 3, setting the timer to 7 seconds and so on, until I stop at stage 5</p>
  <p>This is my code:</p>
  <pre><code>  const [ timer, setTimer ] = useState(5)
    const [stage, setStage] = useState(1)
    const timerMap = {
          2: 6,
          3: 7,
          4: 8,
          5: 9
      }
    const changeTimeHandler = (timer, setTimer) =&gt; {
          setStage(stage+1)
          setTimer(timerMap[stage])
          return { delay:1 }
    }
      console.log(timer)
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;timer-wrapper&quot;&gt;
          &lt;CountdownCircleTimer
            isPlaying
            duration={timer}
            colors={[&quot;#004777&quot;, &quot;#F7B801&quot;, &quot;#A30000&quot;, &quot;#A30000&quot;]}
            colorsTime={[10, 6, 3, 0]}
            onComplete={() =&gt; (changeTimeHandler(timer, setTimer))}
            size={100}
          &gt;
            {renderTime}
          &lt;/CountdownCircleTimer&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  </code></pre>
  <p>When I run my code I get the error:</p>
  <p><code>Warning: Received NaN for the 'strokeDashoffset' attribute. If this is expected, cast the value to a string.</code></p>
  <p>Need help figuring out how to build the logic to get the desired effect.</p>