tickValue function does not work (React)

I will be explaining what I am trying to do before explain the problem that I am facing:

I am trying to sync two functions tick() and tickValue() after tick hits 0 mins and 0 secs it should stop and start tickValue and will keep looping after, but tickValue got an issue where this.state.minute and this.state.second reading NAN on the screen plus this.state.value does have a value of 5 when it is being used on tick() but on tickValue() does have no value at all. May I know what is going on please?

Note: I did not change the value of this.state.value, I used this.state.newValue so I can use the same value of 5 on the other functions if I need to. I used testing tickValue function button to test one function at a time to make sure it works. So you can test it there too.


if(this.state.isValueCountDown == false){


this.setState({newValue: (this.state.value * 60) - this.state.newCounter})

var mins = Math.floor(this.state.newValue / 60);
var secs = this.state.newValue % 60;

this.setState({minute: mins, second: secs})

if (mins < 10){
  this.setState({minute: "0" + this.state.minute}) 
if (secs < 10){
  this.setState({second: "0" + this.state.second})


if(mins === 0 && secs === 0){

this.intervalHandle = this.setInterval(this.tick, 1000)


Here is the link on CodePen: https://codepen.io/andrewalkazeer/pen/mapeLv?editors=0010