How to animate the removal of a MUI datagrid row in a react app

Question

I am new to using MUI and I'm trying to create a simple animation which would trigger when a row is removed by the click of a row button (either fade out or even better have it compress). I currently have a workaround solution in which I grab the row through the data-id using document.querySelector and then add a class to it, but I would like to know how to do this using inline css.

After research it looks like I would have to use something like adding a keyframe (which I've seen done for individual elements) but I'm unclear how to do that for a row in a MUI data grid.

I've tried using UseGridApiRef and then using the getRowElement to add the below keyframe to that but can't get the syntax right.

I want to do this because currently I believe I am changing the DOM directly (very slow) by doing this:

let el = document.querySelector(`.MuiDataGrid-row[data-id="${id}"]`);
el.classList.add("animate-launch-case");

// Global css Page
.animate-launch-case {
  opacity: 0;
  transition: opacity 1s ease-in;
}

I want to be able to change the virtual DOM instead but having trouble understanding how to do it with state. Here is a Sandbox of my datagrid and here is an example of a keyframe I think would work:

const myEffectExit = keyframes`
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-200%);
  }
`;