setCurrentId(prop) is not a function in reactjs - reactjs

Question

I am getting this error message in console (Uncaught TypeError: setCurrentId is not a function
at onClick (Post.js:19:1) )
I don't know how to handle this error
This is Child Component Post.js
import { Button, Card,CardActions,CardContent,CardMedia,Typography } from '#material-ui/core';
import React from 'react';
import useStyles from "./styles";
import MoreHorizIcon from '#mui/icons-material/MoreHoriz';
import DeleteIcon from '#mui/icons-material/Delete';
import ThumbUpAltIcon from '#mui/icons-material/ThumbUpAlt';
import moment from 'moment';
const Post= ({post , setCurrentId})=>{
const classes = useStyles();
return(
<Card className={classes.card}>
<CardMedia className={classes.media} image={post.selectedFile} title={post.title}/>
<div className={classes.overlay}>
<Typography variant='h6'>{post.creator}</Typography>
<Typography variant='body2'>{moment(post.createdAt).fromNow()}</Typography>
</div>
<div className={classes.overlay2}>
<Button style={{ color: 'white' }} size="small" onClick={() => setCurrentId(post._id)}><MoreHorizIcon fontSize="default" /></Button>
</div>
<div className={classes.details}>
<Typography variant='body2' color='textSecondary'>{post.tags.map((tag)=>`#${tag} `)}</Typography>
</div>
<CardContent>
<Typography className={classes.title} variant='h5' gutterBottom>{post.message}</Typography>
</CardContent>
<CardActions className={classes.cardActions}>
<Button size = 'small' color='primary' onClick={()=>{}}>
<ThumbUpAltIcon fontSize='small'/>
Like
{post.likeCount}
</Button>
<Button size = 'small' color='primary' onClick={()=>{}}>
<DeleteIcon fontSize='small'/>
Delete
</Button>
</CardActions>
</Card>
)
}
export default Post;
This is parent Component
import React from 'react';
import { Grid, CircularProgress } from '#material-ui/core';
import { useSelector } from 'react-redux';
import Post from './Post/Post';
import useStyles from './styles';
const Posts = ({ setCurrentId }) => {
const posts = useSelector((state) => state.posts);
const classes = useStyles();
return (
!posts.length ? <CircularProgress /> : (
<Grid className={classes.container} container alignItems="stretch" spacing={3}>
{posts.map((post) => (
<Grid key={post._id} item xs={12} sm={6} md={6}>
<Post post={post} setCurrentId={setCurrentId} />
</Grid>
))}
</Grid>
)
);
};
This is main file App.js
import React, { useState, useEffect } from 'react';
import { Container, AppBar, Typography, Grow, Grid } from '#material-ui/core';
import { useDispatch } from 'react-redux';
import Posts from './components/Posts/Posts';
import Form from './components/Form/Form';
import { getPosts } from './actions/posts';
import useStyles from './styles';
import memories from './images/memories.png';
const App = () => {
const [currentId, setCurrentId] = useState(0);
const dispatch = useDispatch();
const classes = useStyles();
useEffect(() => {
dispatch(getPosts());
}, [currentId, dispatch]);
return (
<Container maxWidth="lg">
<AppBar className={classes.appBar} position="static" color="inherit">
<Typography className={classes.heading} variant="h2" align="center">Memories</Typography>
<img className={classes.image} src={memories} alt="icon" height="60" />
</AppBar>
<Grow in>
<Container>
<Grid container justify="space-between" alignItems="stretch" spacing={3}>
<Grid item xs={12} sm={7}>
<Posts setCurrentId={setCurrentId} />
</Grid>
<Grid item xs={12} sm={4}>
<Form currentId={currentId} setCurrentId={setCurrentId} />
</Grid>
</Grid>
</Container>
</Grow>
</Container>
);
};
export default App;
I am trying to debug my react code and expecting something that I missed