Asynchronous Updating data and Missing Pagination in react-mentions

[ajay-pal1]

Description
When updating the mention data asynchronously in the react-mentions component, the mention suggestions do not update properly. Additionally, pagination is not supported, making it difficult to handle large datasets efficiently.

Steps to Reproduce

1. Initialize MentionsInput with an async data source.
2. Fetch mention data dynamically based on user input.
3. Observe that the mention list does not update as expected.
4. Scroll through the mention list and try to load more data dynamically.

Expected Behavior

• The mention list should update dynamically as new data is fetched.
• Pagination should be supported to fetch additional results when scrolling.

Actual Behavior

• The mention list does not update properly or lags behind, displaying outdated suggestions.
• The component does not support pagination, requiring a full dataset to be loaded at once.

Code Example

<MentionsInput
  value={textAreaValue}
  allowSpaceInQuery={true}
  onChange={onChangeHandler}
  id="mentions_input_text_area"
  allowSuggestionsAboveCursor={true}
  forceSuggestionsAboveCursor={true}
  dataTestId="mentions_input_text_area"
  placeholder="To mention the accounts use '@'"
  style={{ ...mentionsInputWrapperStyle(isFormulaValid) }}
  className={isFormulaValid ? 'mentions_input_error' : 'mentions_input'}
  customSuggestionsContainer={(item) => (
    <CustomSuggestionsContainer
      item={item}
      key={mentionDataRef.current.length}
      onScroll={(event) => {
        const { scrollTop, scrollHeight, clientHeight } = event.target;
        if (scrollTop + clientHeight >= scrollHeight - 10 && nextUrl) {
          fetchMentionData(searchText, (resData) => {
            mentionDataRef.current = resData;
          }, true);
        }
      }}
    />
  )}
>
  <Mention
    trigger={'@'}
    isLoading={isLoading}
    ignoreAccents={true}
    appendSpaceOnAdd={true}
    data={mentionDataRef.current}
    key={mentionDataRef.current.length}
    onAdd={(id) => { onItemSelected(id) }}
    style={{ ...mentionStyle(isFormulaValid) }}
    renderSuggestion={(suggestion, search, highlightedDisplay, index, focused) => (
      <CustomRenderSuggestion
        highlightedDisplay={highlightedDisplay}
        key={mentionDataRef.current.length}
      />
    )}
  />
</MentionsInput>

Environment

• Package Version: (^4.4.10)
• React Version: (^18.2.0)
• Browser: (Google Chrome)