Как исправить дублирование компонента в react?

При клике на карточку у меня срабатывает функция loadAboutInfo через которую я передаю данные в другой компонент и там их вывожу. Но если я два раза нажму на одну и ту же карточку то она дублируется.Как я могу это исправить?

        loadAboutInfo=(pokemonValue,pockemonImg,pokemonId)=>{
            this.setState(prevState => ({
                pokemonValue:[...prevState.pokemonValue, pokemonValue],
                pockemonImg,
                pokemonId
            }))
        }

    render() {
        return (                    
            <div className="wrapper">
                <div className="pokemonlist__inner__cards">
                    <div className="pokemonlist__cards">
                        {this.state.pokemonList.map((value,index)=>{
                            let pokemonImgTemplate = this.state.pokemonImgTemplate;
                            let pokemonId = value.id;
                            let pockemonImg = pokemonImgTemplate.replace('{id}',pokemonId);
                            return(
                                <div className="pokemonListCard" key={index} onClick={()=>this.loadAboutInfo(value,pockemonImg,pokemonId)}>
                                        <PokemonCard 
                                            pockemonImg={pockemonImg}
                                            pokemonName={value.name}
                                            pokemonTypes={value.types}
                                        />
                            </div>
                            )
                        })}
                    </div>
                    <PokemonLoadMore 
                        loadMore={this.loadMore}
                        currentPage={this.state.currentPage}
                    />
                </div>
            </div>
        );
    }
}

Компонент где вывожу данные

render() {
        return (
            <div className="pokemon__about">
                {this.props.pokemonValue.map((value,index)=>{
                   let totalMoves = value.moves.length;
                    return(
                        <div className="pokemon__about__wrapper" key={index}>
                            {this.props.pokemonId == value.id ?
                                <div className="pokemon__about__inner" key={index}>
                                    <AboutImage 
                                        pockemonImg={this.props.pockemonImg}
                                    />
                                    <AboutName
                                        pockemonName={value.name}
                                    />
                                    <div className="pokemon__about__table">
                                            <AboutPokemonTypes 
                                                pokemonTypes={value.types}
                                                />
                                                <table>
                                            <AboutPokemonWeight 
                                                pockemonWeight={value.weight}
                                            />
                                            <AboutPokemonMoves 
                                                totalMoves={totalMoves}
                                            />
                                        </table>
                                    </div>
                                </div>
                                :
                                null
                            }
                        </div>
                    )
                })}
            </div>
        );
    }
}

Спасибо за ответы