Проблемы с ключом при использовании фрагментов - React

Question

Я получаю следующую ошибку: Каждый ребенок в списке должен иметь уникальный ключ.

Я пытался использовать «индекс», который я создал в .map, и он не работал. Затем я попытался использовать суффиксы, чтобы они не повторялись, но со мной постоянно повторяется одна и та же ошибка. Я думаю, что это связано с рендерингом на стороне сервера

Проблема начала возникать, когда я добавил код внутри this.state.showdesplegar) && (i.sndmenu) &&, чтобы показать кнопку. Кто-нибудь знает, что я делаю не так?

    render(){
        const renderMenu = items => {
            return (
                <ul className="list">
                    {items.map((i, index) => {
                        return (
                            <React.Fragment key={'fragment'+ i.fsttitle + i.sndtitle + i.trdtitle}>
                            <li className={`list__item ${firstMenu}${secondMenu}${thirdMenu}`} key={i.fsttitle + i.sndtitle + i.trdtitle}>
                                <a 
                                    href={i.URL} 
                                    className={`${classMn}${classSb}${classTm}` + (this.state.showfstmenu === i.fsttitle ? ' active' : '')}
                                    onClick={() => i.fstmenu ? this.showHideSubmenu(i.fsttitle) : null }>
                                        {icoJson}
                                        <span>{i.fsttitle}{i.sndtitle}{i.trdtitle}</span>
                                </a>
                                {i.menu && renderMenu(i.menu)}
                                {this.state.showfstmenu === i.fsttitle && (
                                    <>{i.fstmenu && renderMenu(i.fstmenu)}</>
                                )}
                                {i.sndmenu && renderMenu(i.sndmenu)}
                            </li>
                            {( this.state.showdesplegar) && (i.sndmenu) && (
                                <div key={"key"+index} className="content-bnt">
                                    <button key={"ds"+index} id="desplegar" className="btn btn--rounded" onClick={this.desplegarClick}>
                                        <Icon key={"arr"+index} icon="flecha" className="ico-flecha"/>
                                        <Icon key={"fc"+index} icon="flecha" className="ico-flecha"/>
                                    </button>
                                </div>
                            )}
                            </React.Fragment>
                        )
                    })}
                </ul>
            )
        }
        return (
            <nav className="nav">
                <div className="menu">
                    {renderMenu(this.state.navigation.menu)}
                </div>
            </nav>
        )
    }

Редактировать с решением: Согласно документации React, если объявлено <React.Fragment>, в некоторых случаях необходимо добавить key. В моем случае это необходимо, поскольку мой фрагмент повторяется в цикле. Это решает мою проблему, и это ссылка, где это объясняется: Ключевые фрагменты