I'm fetching data from an API and then I save an array inside a state. While I'm trying to modify the specific field in object inside an array using input, I'm getting the following error: 'Uncaught TypeError: Cannot assign to read only property 'amount' of object '#''.

States (I'm using RTK Query):

const { data: Florists_data, refetch } = useGetFloristQuery(Number(sessionStorage.getItem('florist_id')));
const [flowersData, setFlowersData] = useState(Florists_data?.florist[0].flowers);
const [tmpFlowers, setTmpFlowers] = useState(Florists_data?.florist[0].flowers);

Update function:

const updateFieldChanged = (index: number, e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
        let newArr = [...tmpFlowers!];
        newArr[index].amount = Number(e.target.value); //GETTING ERROR HERE
        setTmpFlowers(newArr);
    }

Inputs:

{flowersData?.map((flower, index) => {
  return (
    <>
      <div className={classes.Nested_Flower_Container} key={index}>
        <div className={classes.Nested_Flower_Name}>
          {flower.name}
        </div>
        <div className={classes.Nested_Flower_Input} style={{ marginRight: '0.2em' }}>
          <TextField
            id="Amount"
            label="Amount"
            variant="outlined"
            size="small"
            type="number"
            onChange={(e) => {
              updateFieldChanged(index, e);
            }}
            className={classes_2.root}
            />
        </div>
      </div>
    </>)
})}