Изменения не отражаются в пользовательском интерфейсе в реакции

Question

Когда пользователю нравится сообщение, то счетчик увеличивается в пользовательском интерфейсе.Но когда пользователь удаляет подобное, то счетчик пользовательского интерфейса не меняется, хотя он изменяется на сервере. Как его решить?Когда пользователю нравится сообщение, то счетчик увеличивается в пользовательском интерфейсе.Но когда пользователь удаляет подобное, то счетчик пользовательского интерфейса не меняется, хотя он изменяется на сервере. Как его решить?

import React from 'react';
import moment from 'moment';
import CommentForm from './CommentForm';
import CommentList from './CommentList';
import CommentModal from './CommentModal';
import { connect } from 'react-redux';
import { startAddComment, startAddLike, startRemoveLike } from 
'../actions/post';
import { Link } from 'react-router-dom';
import UserInfo from './UserInfo';


class PostListItem extends React.Component{
 constructor(props){
     super(props);
     this.state = {
         isliked: false,
         commentM: undefined,
         likes: this.props.likes
     }
 }

 componentDidMount(){
    if(this.props.likes.includes(this.props.user.uid)){
        this.setState(() => ({isliked:true}));
    }
}


onClickedLike = () =>{

   if(this.state.isliked === false){
       this.props.dispatch(startAddLike(this.props._id));
       this.setState(()=>{
           console.log(this.props);
           return{
               isliked:true     
            }
            });
   } else{
       this.props.dispatch(startRemoveLike(this.props._id));
       this.setState(()=>({isliked:false}));
   } 
}

openModal = () =>{
    this.setState({commentM: this.props.comments});
}
closeModal = () =>{
    this.setState(({commentM: undefined}));
}

 render(){
    return(
        <div className="post">
            <div className="post__header">
                <UserInfo user={this.props.author}
                   time={this.props.createdAt}/>

                {
                    (this.props.user.uid === this.props.author.uid)?
                    <Link to={`/edit/${this.props._id}`} 
 className="post__edit">
                    Edit</Link>:''    
                }

                {/* <p className="post__time"> 
 {moment(this.props.createdAt).fromNow()}</p> */}
            </div>
            <div className="post__caption">{this.props.caption}</div>
            <img src={this.props.content} className="post__content"/>
            <div className="post__extra">
                <div className="post__lc">
                    <button className="post__button"
                        onClick={this.onClickedLike}
                    >{this.state.isliked? <i className="fas fa-futbol"></i> 
 : <i className="far fa-futbol"></i>}
                    </button>    
                    <button className="post__button"
                        onClick={this.openModal}><i className="far fa- 
 comment"></i>
                    </button>
                </div>

             {this.props.likes.length !== 0 && <p className="post__like"> 
{this.props.likes.length} {this.props.likes.length === 1? 'like':'likes'} 
</p>}  // likes count is not changing while removing the like(ui only)

                <CommentModal 
                    commentM={this.state.commentM}
                    closeModal={this.closeModal}/>

                <CommentForm onSubmit={(comment) => {
                  this.props.dispatch(startAddComment(this.props._id, 
comment));
                }} />
             {this.props.comments && <CommentList comments= 
{this.props.comments}/>}    
            </div>               
        </div>
    );
}
};

const mapStateToProps = (state) => {
return{
    user: state.auth
}
}

export default connect(mapStateToProps)(PostListItem);