LikeCount is not rendering after change i need to refesh the page for change

[DipenMavaniLdce]

when i click on like button its LikeCount is successFully Increase but it is not

this is my scream component

`import React,{Fragment,useEffect} from 'react'
import withStyles from '@material-ui/core/styles/withStyles'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import CardMedia from '@material-ui/core/CardMedia'
import Typography from '@material-ui/core/Typography'
import {Link} from 'react-router-dom'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

import {connect} from 'react-redux'
import {likeScream,unlikeScream} from '../redux/actions/dataAction'

//icon
import FavoriteIcon from '@material-ui/icons/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import CommentIcon from '@material-ui/icons/Comment';
import ToolButton from './ToolButton'
import LikeButton from './LikeButton'

const style = {
card : {
display : 'flex',
marginBottom : 20,
},
image : {
minWidth : 200,

},
content :{
    padding : 25,
    objectFit : 'cover',
}

}

function Scream({classes,scream,scream : {body , createdAt , imageUrl , userHandle , Screamid , likeCount , commentCount },user }) {
dayjs.extend(relativeTime)

return (
    <Card className= {classes.card}>
        <CardMedia image = {imageUrl}  title = 'Profile Image' className= {classes.image} />
        <CardContent className = {classes.content}>
            <Typography variant = 'h5' component = {Link} to = {`user/${userHandle}`} color='primary'>{userHandle}</Typography>
            <Typography variant = 'body2' color= 'textSecondary' >{dayjs(createdAt).fromNow()}</Typography>
            <Typography variant = 'body1'>{body}</Typography>
            <LikeButton Screamid={Screamid} />
            <span>{likeCount} Likes</span>
            <ToolButton tip="comments">
                <CommentIcon color="primary" />
            </ToolButton>
            <span>{commentCount} comments</span>
        </CardContent>
    </Card>

)

}

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

export default connect(mapStateToProps)(withStyles(style)(Scream))
`

and this is my LikeButton component

`import React,{Fragment} from 'react'
import {connect} from 'react-redux'
import FavoriteIcon from '@material-ui/icons/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import ToolButton from './ToolButton'
import {Link} from 'react-router-dom'
import {likeScream,unlikeScream} from '../redux/actions/dataAction'
function LikeButton({user,Screamid,unlikeScream,likeScream}) {
const isLiked = () => {
if(user.likes && user.likes.find(like => like.Screamid === Screamid)){

        return true
    }else {
        return false
    }
}
let likeButton = user.authenticated ? (
    <Fragment>
    {isLiked() ? (
        <Fragment> 
        <ToolButton tip = 'unlike' onClick={() => unlikeScream(Screamid)}>
            <FavoriteIcon color = 'primary' />
        </ToolButton>
        </Fragment>
    ) : (
        <Fragment>
        <ToolButton tip = 'like' onClick = {() => likeScream(Screamid)}>
        <FavoriteBorderIcon color = 'primary' />
        </ToolButton> 
        </Fragment>  
    ) } 
    </Fragment>

) : (
    <Fragment>
    <ToolButton tip = 'login befor like'>
        <Link to = '/login'>
        <FavoriteBorderIcon color = 'primary' />
        </Link>
    </ToolButton>
    </Fragment>
)

return likeButton

}

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

const mapActionsToProps = {
likeScream,
unlikeScream
};

export default connect(
mapStateToProps,
mapActionsToProps
)(LikeButton);

please help me out