FIRESTORE, функции не получают обновления правильно. - reactJS

Question

как только моя прокрутка прокручивается, чтобы получить больше данных, эти данные возвращаются, записываются и обрабатываются, но невозможно активировать какую-либо функцию этих полученных данных.

моя конечная прокрутка работает отлично, я не получаю никаких ошибок, функции просто не активируются.

пример: как только мы получаем больше сообщений, мы не обновляем данные во внешнем интерфейсе, как если бы функция загара не существовала . однако при нажатии кнопки «Нравится» или данных, отправленных в хранилище, обновление «кнопки» (изменение зеленой кнопки) на «нравится» не выполняется.

Извините, ребята, но я ничего не нашел здесь в сообщество, которое дает мне видение решения моей проблемы.

constructor(props) {
    super(props);  
    this.state = {
      colorLike: 'white',
      PostsAtt: [],
    }
this.ColorLike = this.ColorLike.bind(this);

infScroll fun c (здесь я получаю больше данных (сообщений)

InfScroll = () => {
    let db = firebase.firestore();
    let lastVisible;
  
    var first = db
      .collection("newPost")
      .orderBy("createdAt", "desc")
      .limit(this.state.PostsAtt.length);
      return first.get().then((documentSnapshots) => {
      lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
        
      var next = db
        .collection("newPost")
        .orderBy("createdAt", "desc")
        .startAfter(lastVisible)
        .limit(22);
        next.get().then(documentSnapshots => {
        const postAttArr = []; //<----see here
        documentSnapshots.docChanges().forEach((doc) => {
          postAttArr.push({ data: doc.doc.data(), id: doc.doc.id });
        });
        setTimeout(() => {
          this.setState( prev => ({ PostsAtt: [...prev.PostsAtt, ...postAttArr] }) )
        }, 500);
      });
    });
  };

componentDiMount (получаю начальные сообщения)

componentDidMount() {  

    // get firestore docs;
    let db = firebase.firestore();

    db.collection("newPost")
    .orderBy('createdAt', 'desc')
    .limit(22)
    .onSnapshot( documentSnapshots => { 
      let PostsAtt = []           
      documentSnapshots.forEach( doc => {
        PostsAtt.push({ data: doc.data(), id: doc.id });  
      }); 
        this.setState({PostsAtt: PostsAtt});
    });
  }

функция лайка

UplikeFunc(id, likes) {
    const user = firebase.auth().currentUser.displayName;
    if( !likes.includes(user) ) {               
      firebase.firestore().collection('newPost').doc(`${id}`).update({         
        likes: firebase.firestore.FieldValue.arrayUnion(user),
        LikeColor: 'rgb(87, 151, 87)' 
      });        
        this.setState({colorLike: 'rgb(87, 151, 87)'});
    } else {         
        firebase.firestore().collection('newPost').doc(`${id}`).update({          
          likes: firebase.firestore.FieldValue.arrayRemove(user),
          LikeColor: 'white' 
        });          
    }
      this.setState({colorLike: 'white'});
      this.setState({idTeste: id});
}

рендеринг моих сообщений на карте - JSX

<InfiniteScroll
          dataLength={this.state.PostsAtt.length}
          next={ this.InfScroll }
          hasMore={true}
          loader={<h4 style={{textAlign: 'center'}}> Loading... </h4>}
          height={800}
          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" ref={node => {this.node = node}}>
                    {index}
                    <div className="viewPost-box" key={index}
                    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?.likes?.includes(firebase.auth().currentUser?.displayName) ? 'green' : 'white'}}>                            
                              <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>