Как правильно добавить в массив сращиванием в React

Вопрос новичка.

У меня есть массив, к которому мне нужно добавить, и я использую для этого slice. Я использую gatsby / react. Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда моя страница / компонент повторно отображает объект, который я добавляю в свой массив, снова добавляется

Вот мой код

class IndexPage extends PureComponent {

  render() {
    const data = this.props.data;

    const hostels = data.featuredHostel.edges;

    const hopimage = data.hop.childImageSharp.fluid;
    hostels.splice(8, 0, {
      node: {
        featuredImage: {
          alt: 'Bedhopper Image',
          fluid: hopimage
        },
        id: 'bedhopper',
        slug: '/deals/bed-hopper',
        title: 'For travel adicts who want to stay everywhere'
      }
    });

    return (....

Застрял на этом какое-то время. Любая помощь приветствуется