MUI Slider will not move (from UI) if value property is set

I've been having trouble getting my slider to work when I use its value={...} property. For context, there is a slider for each row in a MUI Data Grid

I will layout the code accordingly so it makes sense:

TABLE.tsx

  const handleSlide = (id, newValue) => {
    const dataRows = [...backendData];
    const currentValue = dataRows.find((row) => row.id === id)!.comfortability;
    setBackendData(dataRows);

    //This will be replaced with a fetch POST request once I know its functionally sound
  } 

As commented, this is where the pass back ends, here I will get the row ID and the slider's new value in order to make a query and modify a MySQL table (this latter part is irrelevant, only added in for context)

{field: 'comfortability', headerName: 'Comfortability', flex: 1, headerClassName: 'header-cell', cellClassName: 'body-cell',
      renderCell: (params) => {
          return(
              <RowSlider id={params.row.id} disabled={params.row.lock} passedInValue={params.row.comfortability}  onChange={handleSlide}></RowSlider>
          );
      }
    },

This is where the function call to handleSlide is made. For context, this is one of the columns instantiated for the MUI DataGrid. (comfortability is simply a number value)

I created a custom prop called onChange which calls handleSlide. I also pass in params.row.id as id and params.row.numberValue as passedInValue into the <RowSlider> component.

RowSlider.tsx

import * as React from 'react';
import { Box, Slider } from '@mui/material';


export default function RowSlider({id, disabled, passedInValue, onChange}) {
  
  const [value, setValue] = React.useState<number>(passedInValue);

  const handleChange = (event: Event, newValue: number)  => {
    setValue(newValue);
    return(onChange(id, newValue));
  };

    return (
        <Box sx={{ width: "90%", position: 'relative', padding: "4% 10%"}}>
          <Slider value={value} disabled={disabled} onChangeCommitted={() => handleChange} step={1} marks min={1} max={5}  />
        </Box>
      );  
}

Here is where the issue occurs...

When I use the value property of the MUI Slider, it prevents me from moving the slider in the UI. However, I need this value property because:

1. The value needs to be initially set via data from MySQL to reflect the database accurately
2. When the slider is moved in the UI, it should (in theory)
   • Change the value state, which in turn, updates the value of the slider
   • And make a callback to onChange will the updated value and row id.

Please help me get my slider moving! I hope I did not include too much information, I know sometimes things can be finicky and I wanted to include all the relevant contextual information in case it helps.

Thank you~

Read TABLE.tsx and RowSlider.tsx first, then check the MUI Slider usage shown there, especially the value and change-handler wiring. Done means the slider can be moved from the UI, initializes from the supplied row value, updates its displayed value, and invokes onChange with the row id and new value.