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

[LiamEinspahr]

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~