React Range Slider value bubble

I am trying to create a custom react range slider. So far everything works fine. I need to display the current value of the slider in the circular toggle button every time (not just on being on-slider being active). As the slider is toggled back & forth, the value should be dynamically changing on the circular toggle button. Something like this:

I tried using react refs to capture the current styles and apply CSS on it accordingly, but it doesn't seem to work.

The link for working snippet:

https://codesandbox.io/s/eloquent-worker-qt99n?file=/src/customSlider.js

Any help to resolve the same appreciated :)

Thanks in advance

from React Range Slider value bubble