I'm using this function above the return. The div (below) is in the return. The result that I get is a volume slider that functions. However, visually the slider button never moves. How can I fix this to make the button show where the volume is?

```js
const Component = () => {
  const setVolume = (e) => {
    audioRef.current.volume = e.target.value / 100;
  };

  return (
    <div className="volumeControl">
      <button onClick={() => audioMute()}> Mute </button>{" "}
      <input
        min={0}
        max={100}
        value={50}
        step={1}
        onChange={setVolume}
        type="range"
      />
    </div>
  );
};

ReactDOM.render(<Component />, document.getElementById("root"));
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
```