title: MUI Slider 'onChange' not changing 'value'
body: <p>I am trying to replace a numeric input control with an MUI Slider though whenever the slider is dragged the 'onChange' doesn't seem to want to change anything. It spits out a NAN error in the debug.</p>
  <p>&quot;Warning: Received NaN for the <code>value</code> attribute. If this is expected, cast the value to a string.&quot;</p>
  <p>I still have the numeric input running along side it. Upon change of the numeric input the slider does react and move on its own accordingly to show current value.</p>
  <p>Help is much appreciated!</p>
  <pre><code>for (let i = 0; i &lt; bones.length; i++) {
          let bone = bones[i].bone;
          
          controls.push(
              &lt;div className=&quot;bone-control&quot; key={i}&gt;
                  &lt;p&gt;{bones[i].name}&lt;/p&gt;
                  &lt;div className=&quot;flex-container&quot;&gt;
                      &lt;div className=&quot;control&quot;&gt;
                      &lt;Slider
                          size=&quot;small&quot;
                          aria-label=&quot;Small&quot;
                          className=&quot;numeric-input&quot;
                          min={-3.1}
                          max={3.1}
                          step={0.1}
                          value={Number(this.state[bone].x).toFixed(2)}
                          onChange={value =&gt; {
                              this.setState({[bone]: {x: value, y: this.state[bone].y, z: this.state[bone].z}});
                              window.changeRotation(bone, value, &quot;x&quot;);
                          }}
                      /&gt;
                          &lt;NumericInput
                              className=&quot;numeric-input&quot;
                              min={-3.1}
                              max={3.1}
                              step={0.1}
                              value={Number(this.state[bone].x).toFixed(2)}
                              onChange={value =&gt; {
                                  this.setState({[bone]: {x: value, y: this.state[bone].y, z: this.state[bone].z}});
                                  window.changeRotation(bone, value, &quot;x&quot;);
                              }}/&gt;
                      &lt;/div&gt;
  </code></pre>