ApplyTransaction Remove from AG Grid React does not remove the row from the DOM right away. document.querySelector still returning something

Question

Hi I am trying to disable a button based on if a css class name is present in the DOM or not, using document.querySelector(); If document.querySelector('invalid-cell') returns a value the button should be disabled otherwise enable it.

My problem is that document.querySelector('invalid-cell') still returns a value even though I have used: gridRef.current.api.applyTransaction({ remove: selectedRow });

I found the applyTransaction Remove does not actually remove the row from the DOM right away.

does anybody know a way around this or how can my document.querySelector('invalid-cell') return null after calling gridRef.current.api.applyTransaction({ remove: selectedRow });

I found that if I click the button that calls the deleteSelectedRow once the row with 'invalid-cell' has been removed then document.querySelector(".invalid-cell") does not return a value and enables the button but when it is executed in the same function as gridRef.current.api.applyTransaction({ remove: selectedRow }); Then it will return a value.

Here is part of my code:

var [isButtonDisabled, setIsButtonDisabled] = useState(false);

const [columnDefs, setColumnDefs] = useState([
    {
      field: "Column A",
      editable: true,
      cellEditor: "agSelectCellEditor",
      cellClassRules: {
        "invalid-cell": (params) => !params.value,
      },
    },
    {
      field: "Column B",
      editable: true,
      type: "valueColumn",
      valueParser: "Number(newValue)",
      cellClassRules: {
        "invalid-cell": (params) => !params.value,
      },]);

const deleteSelectedRow = () => {
    const selectedRow = gridRef.current.api.getSelectedRows();
    gridRef.current.api.applyTransaction({ remove: selectedRow });
    if (document.querySelector(".invalid-cell") !== null) {
      setIsButtonDisabled(true);
    } else {
      setIsButtonDisabled(false);
    }
  };

<a onClick={deleteSelectedRow} title="Delete Row">
   <FontAwesomeIcon icon="trash" />
</a>

<div className="ag-theme-alpine" style={{ width: 1600, height: 300 }}>
            <AgGridReact
              ref={gridRef}
              rowData={jsonData}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              animateRows={true}
              rowSelection="single"
              onCellClicked={cellClickedListener}
              editable="true"
              onFirstDataRendered={onFirstDataRendered}
              onCellValueChanged={onCellValueChanged}
            />
          </div>
          <br></br>
          <div
            role="group"
            className="btn-group1"
            style={{ textAlign: "center" }}
          >
            <Button
              variant="primary"
              type="button"
              style={{ textAlign: "center" }}
              onClick={submitBtn}
              disabled={isButtonDisabled}
            >
              COMPLETE
            </Button>
          </div>

I need for the button to be enabled once the user has removed the row with invalid-cell