javascripts default replace function not working in nextjs

I have simple nextjs app and I am trying to use javascript replace function to replace "-" with empty space " ". But I am getting error as TypeError: Cannot read property 'replace' of undefined. Here is the code

import {useRouter} from 'next/router';
import Layout from '../../components/MyLayout';




 const Post = () => {
    const router = useRouter();

    let resString = router.query.id.replace("-", " ");



    return(
        <Layout>
            <h1>{resString}</h1>
            <p>This is the blog post content.</p>
        </Layout>
    );
}

export default Post;