audioControls | Simple way to create your own audio player | Audio Utils library

This is my first StackOverflow question, feel free to add any suggestion you want.

I have an AudioControls component that renders four different Controls components, each for a different audio option (volume, bass, mid, treble). I wrote it in a way that the parent knows and manage the four of the states: useState({ volume: 50, bass: 50, mid: 50, treble: 50, }) and then passed these values to children as props.

I have two concerns regarding this:

1. Control components are simply the same and maybe they could have their own value state (put an audioValue state on each Control). I've read it's a good practice to always lift the state when possible, but why is it needed? What are good reasons to do it?

2. Is there a way to use the map function with these Controls given that they are all pretty similar? Without losing legibility, of course.

This is the AudioControl code: