How to get the updated values from the table into a state in ag-grid

Basically, I have a table of items, where users can increase or decrease the quantity of the item they wish to purchase. The table has a Quantity column, which renders its own UI using the cellRenderer method to display increase/decrease buttons that change it. It also has a Total Price column that automatically calculate based on the quantity. The rowData for the table comes from an api, which is then modified and stored in a separate state variable.

In my current implementation, the values on the table change when I perform an increase/decrease, and the total price recalculates as well. However, this change does not get reflected on the state where the data is stored. Below is a sample code.

const Component = () => {
  // ...
  const [rowData, setRowData] = useState(modifiedApiData);
  // ...
  return (
    <AgGrid 
      rowData={rowData}
      columnDefs={[
        {
          field: 'name',
          headerName: 'Name',
          headerTooltip: 'Name',
          //...
        },
        {
          field: 'quantity',
          headerName: 'Quantity',
          headerTooltip: 'Quantity',
          cellRenderer: (row: any) => {
            const minimumQty = row?.data.min;
            const maximumQty = row?.data.max;
            const quantity = row?.data.quantity;
            
            const handleIncrease = () => {
              row?.setValue(quantity + 1);
            };
            const handleDecrease = () => {
              row?.setValue(quantity - 1);
            };

            const disableDecrease = minimumQty === quantity;
            const disableIncrease = maximumQty === quantity;

            return (
              <Box
                display='flex'
                justifyContent='space-between'
                alignItems='center'
              >
                <IconButton
                  size='small'
                  aria-label='decrease quantity'
                  disabled={disableDecrease}
                  onClick={handleDecrease}
                >
                  <MinusIcon />
                </IconButton>
                <Box component='span' sx={{ mx: '0.15rem' }}>
                  {row?.data.quantity}
                </Box>
                <IconButton
                  size='small'
                  aria-label='decrease quantity'
                  disabled={disableIncrease}
                  onClick={handleIncrease}
                >
                  <PlusIcon />
                </IconButton>
              </Box>
            );
          },
        },
        // ...
      ]}
    />
  )
}

Here, I'm using the setValue function provided from the cellRenderer parameter to update the quantity on the table. Whenever I log rowData on the console everytime I increase/decrease the quantity, nothing changes on the state, but the table does change.

How can I obtain the updated data from the table into the state? I need to get this updated state so that I can send the data into the backend when submitting the order. What is a better way to do this type of updating?