React Redux: Best design pattern to update store with HTML range input

I'm trying to update a value on an item in an array of items in a Redux store using a range input. I'd like to find out what is the best pattern to do this efficiently. The store includes a selected item, and n number of other similar items. The problem here is the update lags very badly, obviously because of the number of re-renders on each increment of the input elements step value.

Even with minimal Components in the render tree, the input is visibly laggy. Because the input is controlling opacity of an item on the page, which I want immediate feedback on, I can't update the value onmouseup, for example.

What is the recommended design pattern this scenario?

Here's a minimal example.

const initialState = {
     selectedItem : {
     id: "someId",
     opacity:0
      },
     items: [
        {
        id: "someId",
        opacity:0
        },
    //...many more items
    ]  
   }

The view has a map of the items.

function Demo () {
const dispatch = useDispatch()
const items = useSelector(GET_ITEMS)
const selected = useSelector(GET_SELECTED)

return (
 <React.Fragment>
   <input type="range" value={selected.opacity} min={0} max={1} step={0.01} onChange($event) => {
     dispatch(updateValue($event.target.value))
 } />
    {items.map(item => (<div key={item.id}>{item.id}</div>))}
 </React.Fragment>
)
}