Uncaught TypeError: Cannot read properties of undefined (reading 'markup')
    at tt (react-mentions.esm.js:98:1)
    at tu (react-mentions.esm.js:267:1)
    at v.addMention (react-mentions.esm.js:1822:1)
    at v.selectFocused (react-mentions.esm.js:1525:1)
    at react-mentions.esm.js:1480:1
    at Object.eA (react-dom.production.min.js:55:313)
    at eq (react-dom.production.min.js:55:465)
    at react-dom.production.min.js:56:34
    at rg (react-dom.production.min.js:56:135)

            <MentionsInput
              style={mentionsInputStyle}
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder={'Add a comment or mention with @'}
              a11ySuggestionsListLabel={'Suggested mentions'}
            >
              <Mention
                data={(teamMembers || []).map(member => {
                  const item = { id: member.id, display: `${member.first_name} ${member.last_name}` };
                  console.log("Mentions - item", item);
                  return item;
                })}
                trigger="@"
                style={mentionStyle}
              />
            </MentionsInput>

  var captureGroupOffsets = config.map(function (_ref) {
    var markup = _ref.markup;
    var result;

    if (markup !== undefined) {
      result = accOffset;
      accOffset += countPlaceholders(markup) + 1;
      return result;
    }

    return result;
  });