React AG Grid not saving row selection after setting state to hold rows selected

Question

I am using AG Grid in React for multi row selection in my table. I want to have a button outside the grid that is disabled on no row selection and enabled once at least one row is selected. The row selection was working fine before I tried to save the selected rows in a state. Now the row gets unselected immediately after I select it.

Here is the code that runs on selection:

 function handleSelectionChanged(event: any) {
    const selectedData = event.api.getSelectedRows();
    setSelectedComparisons(selectedData);
  }

Here is my initialization of the state:

const [selectedComaparisons, setSelectedComparisons] = useState([]);

Here is the code for disabling and enabling the button

<MotifButton
          onClick={() => {
            console.log();
          }}
          style={{ width: '220px', marginBottom: '50px'}}
          variant="secondary"
          disabled={selectedComaparisons.length === 0}
        >
          <MotifIcon
            src={actionIcDelete24px}
            style={{ width: '18px', marginRight: '4px' }}
          />
          Delete Comparisons
</MotifButton>

See here gif of error

If I remove the line setSelectedComparisons(selectedData);, the row selection works properly.