Нужен специалист по React, хорошо понимающий природу его работы.

Проблема:
Элементарный код и задача, но возникла проблема после внедрения доп. функционала. На странице выводится список элементов с использованием компонента InfiniteScroll, при редактировании одного из элементов списка, исчезают все элементы и появляется сообщение о загрузке. После этого ничего не происходит. Предполагаю, что эта проблема должна решаться через useEffect, но не могу понять как он работает и ни один из программистов мне не может это объяснить.

Пример кода:
<InfiniteScroll
dataLength={data.length}
scrollThreshold="700px"
next={() => fetchMoreData(false)}
hasMore={hasMore}
loader={<Typography className={classes.infiniteScrollLoading} variant="body1">Загрузка...</Typography>}
scrollableTarget="scrollableDiv"
endMessage={<Typography className={classes.infiniteScrollLoading} variant="body1">Все данные загружены</Typography>}
>
{data.map(item => (
<RowTpl key={item._id} {...item} user={props.user} openMenu={openMenu}/>
))}
</InfiniteScroll> Сбой скорее всего происходит по причине ре-рендера компонента.
Могу предоставить zoom для отладки, тестирования и исправления.