I am using react and ag grid for my application. Testing is done through react testing library

In my application, I am testing a component which has a use effect that triggers on the state change of a redux store, runs an axios get call and the return value is used to set a useState variable rowsData. The rowsData variable is set to be the rowData of ag grid

rowData: rowsData

Now in a test, I am mocking the axios call. The state change happens by setting an initial value for the respective reducer slice. The axios call should have set the rowData but on screen.debug(), only the header row is there, the second row didn’t render.

In my component I have used console logs to check if rowsData gets populated with the necessary values and it does. within onGridReady, rowsData is populated as well but no row is rendered within grid. I also tried setting the value of rowData through a function, this function console logs rowsData and then returns it, even this function has rowsData populated.

I have a similar test in which the axios call dispaches an action and changes one of the initial values of a reducer slice. This initial value is set as the rowData of ag grid and the row is being rendered in this case.

rowData: reducerSlice.value

Why could the row not be rendering using the first option of a useState variable? Since rowData is being set, it should have been populated in the grid as well.