React range slider not using correct value

I'm trying to build a simple 3 step slider in React, but the target.value is always wrong, and it seems the slider is not receiving the correct input. The first time I click the slider it would be set to 1, then the next would be 2 and 3 and then back down to 2 then 1 and so on. I'd like it to be set to a fixed number instead, how can I do that?

<div className="theme-num">
              <div className="themeNumber">1</div>
              <div className="themeNumber">2</div>
              <div className="themeNumber">3</div>
            </div>
            <div className="toggle-radio">
              <input type='range' min='1' max='3' step='1' 
              value={this.state.value}
              onChange={(e) => this.handleToggle('value', e.currentTarget.value)}
              />
              
            </div>

The state and function:

this.state = {
  value: 1
}

handleToggle(key, value){
    this.setState({ [key] : value})
    console.log(this.state.value)
  }