PostsList component renders list of posts, I want to make it such that when clicked over the div item of a post it gets redirected to that specific post's link

const PostsListView = ({ posts, setError, isloggedin }) => {
    const [redirectCreatePost, setRedirectCreatePost] = React.useState(false)

    if (redirectCreatePost) return (<Navigate to='createPost' />)
    return (
        <Grid container
            align="center"
            alignItems="center"
            justify="center"
            direction="column"
        >
            {
                posts.map(({ category, username, postHeading, createdAt, postid }) => {
                    return (
                        <Link to={`post/${postid}`} style={{ textDecoration: 'none', color: 'black' }}>
                            <Grid
                                key={postid}
                                item container
                                alignItems="center"
                                style={{
                                    width: 600,
                                    borderRadius: 10,
                                    margin: 5,
                                    backgroundColor: '#D3D3D3'
                                }}>
                                <Grid container direction="column">
                                    <Grid item container justify="flex-end">
                                        <Grid item style={{ marginTop: 5, marginLeft: 20 }}> <b>{`c/${category}`}</b> </Grid>
                                        <Grid item style={{ marginTop: 5, marginLeft: 5 }}> {`  posted by u/${username}  ${getTime(createdAt)}`} </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item container alignItems="center" align="left">
                                    <Typography variant="h6" style={{ width: 600, marginLeft: 20, marginRight: 20 }}>{postHeading}</Typography>
                                </Grid>
                            </Grid>
                        </Link>
                    )
                })
            }
        </Grid>
    )
}

Although this seems to create an <a> tag around the grid item <div> in the DOM it is not clickable. I have tried giving the <Link> as component prop to the Grid item and yet no luck. Weirdly enough, it works fine when I replace the <Link> with <a>, but on doing so on clicking the link it refreshes the entire page losing all the state of the App. Appreciate any help. Thanks!