Error cannot read property of undefined Express app

I am currently learning to build a blog website using Node.js, Express and ejs I got the following error when I try to render the "show" page I found a similar problem here but there is a different usage of my code, I still couldn't get mine solved. The similar problem

I did also had an same type error earlier says "cannot read property 'username' of undefined" , but after I restart the server it gives me a different error.

The error I got now:

TypeError: C:\Users\kevin\Desktop\MyBlog\views\blogs\show.ejs:22
20| 

21|             <div class="text-muted">

22|                 <%= blog.date.toLocaleDateString()%> By <%= blog.author.displayName %>  **<------**

23|             </div>

24|         </div>

25| 

Cannot read property 'toLocaleDateString' of undefined

Portion of router.js:

//show the specific blog
router.get("/home/:slug", async(req, res) => {
    const blog = await Blog.find({ slug: req.params.slug });
    console.log(blog);
    if (blog == null) {
        res.redirect("/home");
    }
    res.render("blogs/show", {blog: blog});
})

Portion of show.ejs

    <div class="card-header">
        <h1 class="mb-1"> 
            <%= blog.title %>
            <a href="/home" class="btn btn-light btn-sm float-right"><i class="fas fa-home fa-lg"></i></a>
            <!-- Override DELETE method -->
            <form action="/home/<%= blog.id %>?_method=DELETE" method="POST" class="d-inline">
                <% if((currentUser) && (currentUser.username === blog.author.username)){ %> 
                    <a href="/home/edit/<%= blog.id%>" class="btn btn-light btn-sm float-right"><span class="far fa-edit fa-lg"></span></a>
                    
                    <button type="submit" class="btn btn-light btn-sm float-right"><i class="fas fa-trash-alt fa-lg"></i></button>
                <% } %> 
            </form>
        </h1>


        <div class="text-muted">
            <%= blog.date.toLocaleDateString()%> By <%= blog.author.displayName %> 
        </div>
    </div>

I checked that the blog object is saved into the database correctly:

{
    "_id" : ObjectId("5f4722cc1a623a7710871d6d"),       
    "author" : {
            "id" : ObjectId("5f47177faa8e6e3e4c80f3e9"),
            "username" : "333@gmail.com",
            "displayName" : "Jacky Chan"
    },
    "date" : ISODate("2020-08-27T03:04:44.646Z"),       
    "title" : "1321321321321",
    "coverImg" : "",
    "contents" : "<p>3213131321321321</p>",
    "slug" : "1321321321321",
    "sanitizedHtml" : "<p>3213131321321321</p>",        
    "__v" : 0
}

I used console.log in the ejs file and it seems that it did found the correct blog....

I am guessing that the blog object is referenced incorrectly, maybe?

Finally I don't know if it is the problem of async/await but I tried all I can which eventually lead me here... Any help will be appreciated! Thanks in advance!