react-window | React components for efficiently rendering large lists | Grid library

I'm experimenting with the windowing technique in Next.js with Antd, and I made this simple app that has this index.tsx page:

I am using react-table with react-window-infinite-loader and react-window for infinite scrolling. Initially the table has 20 items(data) on fetch from API. After adding a new data into my table it will successfully update(thru redux) and the data will be 21 now and rows with 21 too. But after scrolling and scrolling the data still has an extra 1 data(ex. 21 > 41 etc. every scroll adds 20 items fetching from API) but the rows is different in length after a few scroll in the table(ex. 21 > 40) 1 row was automatically or suspiciously removed see Row(index) 21 was removed image(without any actions made just by scrolling) index 21 was removed. This will occur an error because the last index of the table now will be 40 and the length of the rows only 40 the below snippet of code will be undefined

i have been using tailwindcss 2 but i wanted to upgrade to 3. I followed their tutorial but is not working i dont know why.

tailwind.config.js

I don't understand why react-window does re-render the list on every(all) useState events, which values are not even connected to the list itself. Could someone please explain how this is internally linked and how I can avoid those re-render?

I am putting together an infinite scrolling list using react-window and am getting a typescript build error. I've searched stack overflow and fixed a few other previous errors but I was unable to fix this last one.

Here is the code in codesandbox: https://codesandbox.io/s/pedantic-leakey-bw5fv?file=/src/App.tsx

Same copy of the code as in the link here:

I almost give up on this bug. I simply just can't type "S" into the search input.

The keyboard works fine.

Sandbox below.

https://codesandbox.io/s/jolly-raman-61zbx?file=/src/App.js

Code from sandbox:

I have follow a couple of examples using react-table and react-window so far so good, but I need the table to have select boxes to select individual or grouped rows as well as a radio-like button to be able to toggle information for a row, I manage to implement this but when I scroll up or down the selected radio button looses its selected state, as shown below

As you can see when I select a row its ID is displayed below the table but when I scroll and move the row away from the view the radio button looses its checked state.

I have an example of the code here

In my react project I am using react-window package to render nested lists. Each parent FixedSizeList row renders a component which uses another FixedSizeList. Parent List doesn't have more than 14 rows at the moment. But the child List may contain upto 2000 rows. Now my problem is, when I try to scroll through the parent List, all the child list items in the viewport seem to re rendering. This is a little bit problematic for me because in my child list item I am using d3js to draw bar chart with transition effect. So these unnecessary re rendering is giving a overall weird UI. Can anyone help me how can I stop these unnecessary renders.

Here is codesandbox link to a very simple example of my problem. Please open the console log. After initial load the topmost log should be like this: initial console log.

Then if you clear the console and scroll the parent list, you will see log like this: console log after parent scrolling. Here you can see that the child list items of child list 0 is re rendering which is not needed for me.

Can anyone give me a solution that can stop these re rendering?

*P.S. I am not using memo since every row is updating the dom on its own.

Edit

I think this problem would solve if the parent list would stop propagating scroll event to child. I tried to add event.stopPropagation() and event.stopImmediatePropagation() in the parent list row but the output was the same as earlier.