Firestore duplicating data in react-infinite-scroll-component

Question

I have a problem with data duplication in the firestore. I'm creating an infinite scroll with the react-infinite-scroll-component webpack. I'm having problems with the calls from the firestore, I can return all items with pagination following the documentation but as soon as I click on my like function Post a new post is added to my posts feed and this can be anywhere in my feed. how can i solve this problem?

my scroll is working, as soon as i scroll down to call the other posts to my feed they are returned as they have to be, however as soon as i click to like or dislike a post a new post is added to my feed. Every help is welcome, thanks guys.

I looked here in the community, but I didn't find anything that could clarify my problem

this.state = {
      PostsAtt: [],
      last: Object,
    }

Infinite Scroll Func (get more posts).

InfScroll() {
    let set = this
    let db = firebase.firestore()
    let last = this.state.last

    var next = db.collection("newPost").orderBy('createdAt', 'desc').startAfter(last).limit(3);
    next.onSnapshot(querySnapshot => {
    var lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1];
    
    querySnapshot.forEach(doc => {
      this.state.PostsAtt.push( { data: doc.data(), id: doc.id } )         
    });
    set.setState( { last: lastVisible } );     
    });
  };

getDocs func pagination from firestore

getDocs() {   
  let set = this
    let db = firebase.firestore()
    //initiate first set
    var first = db.collection("newPost").orderBy('createdAt', 'desc').limit(3);
    first.onSnapshot(function (documentSnapshots) {
      // Get the last visible document
      var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
      //initiate local list 
      let PostsAtt = [];
      documentSnapshots.forEach(doc =>  {
        PostsAtt.push({ data: doc.data(), id: doc.id})
      });
        set.setState({ PostsAtt, last: lastVisible });
      }); 
}

componentDidMount

 componentDidMount() {
    // get firestore docs;
    this.getDocs();
  }

JSX map in class component

 <InfiniteScroll
          dataLength={this.state.PostsAtt.length}
          next={ this.InfScroll }
          hasMore={true}
          loader={<h4 style={{textAlign: 'center'}}>Loading...</h4>}
          height={780}
          endMessage={
            <p style={{ textAlign: "center" }}>
              <b>Não há mais posts.</b>
            </p>
          } >
            
          <div>
              { this.state.PostsAtt.map( (data,index) => {   
                  return (               
                  <div className="viewPost-content" key={index}>
                    {index}
                    <div className="viewPost-box" 
                    width={{width: '600px'}} height={{height: '505px'}}
                    style={{
                      backgroundColor: data?.data.colorBg,
                      backgroundImage: `url(${data?.data.url_img})`,
                      color: 'White'               
                    }}
                    >            
                    <p> <Moment to={data?.data.createdAt.toDate().toString()} /> </p>            
                        <h2 className="text-post"> {data?.data.texto} </h2>                                   
                        <div class="viewPost-icons">
                          <div style={{marginRight: '-5px', marginTop: '180px', backgroundColor:'transparent'}}>             
                            <Link to={`/Posts/${data?.id}`}>
                              <i class="fas fa-comment" 
                                style={{textShadow : ' 2px 1px 1px #000000',color: 'White'}}>                          
                              </i>
                            </Link>
                          </div>
                          <div style={{marginLeft: '-15px', marginTop: '180px',
                            textShadow : '2px 1px 1px #000000'}}> { data?.data.comentarios.length}
                          </div>
                          <div style={{marginRight: '-5px', marginTop: '176px'}}>
                            <button id="bt-Posts" onClick={() => this.UplikeFunc(data?.id,data?.data.likes)}  
                              value={this.state.corDoLike} 
                              style={{color: data?.data.LikeColor}}>
                              
                              <i class="fas fa-thumbs-up" style={{textShadow : ' 2px 1px 1px #000000'}}></i>
                            </button>                            
                          </div>  
                          <div style={{marginLeft: '-15px', marginTop: '180px',
                            textShadow : '2px 1px 1px #000000'}}> { data?.data.likes.length}
                          </div>
                          <div style={{marginRight: '-5px', marginTop: '176px'}}>
                            <button id="bt-Posts" onClick={() => this.UpdislikeFunc(data.id,data.data.dislikes)}
                              value={this.state.corDoDislike}
                              style={{color: data?.data.DislikeColor}}
                              >                   
                              
                              <i class="fas fa-thumbs-down" style={{textShadow : '2px 1px 1px #000000'}}></i>
                            </button>
                          </div>
                          <div style={{marginLeft: '-15px', marginTop: '180px',
                            textShadow : '2px 1px 1px #000000'}}> { data?.data.dislikes.length}
                          </div>                                    
                        </div>
                    </div>                
                  </div>
                    )
                  })
                }
              </div>
              </InfiniteScroll>