handlebars code not rendering the expected file

I am trying to create a small website using handlebars as the templating engine. To start off here is how my directory looks like.

>Views
   >Layouts
      ...main.handlebars
   ...about.handlebars
   ...home.handlebars
handle.js
package.json

my handle.js code looks like this

const express = require('express');
const { engine } = require('express-handlebars');
const app = express()

app.engine('handlebars', engine());
app.set('view engine', 'handlebars');
app.set('views', './views');

app.get('/',(req,res)=>{
    res.render('home')
})
app.get('/about',(req,res)=>{
  res.render('about')
})

app.listen(3002,()=>{
    console.log('server is working')
})

so i would want when i enter localhost:/about details about it should be shown same as when i enter localhost:/ I would want details about home to be shown. so in my about.handlebars i have added an about page when i run its not working. in the main.handlebars i have added some html that says welcome to home. In the home.handlebars i have added no html code. My issue is why is home rendering and showing the html which is in the main.handlebars and why cant i get the about page to work. I have tried deleting the layouts folder together with its adjacent content and this just brings errors. Bros what am i doing wrong?

The main.handlebars file is the default layout for both your home and about pages. The contents of about.handlebars and home.handlebars will be inserted into the main.handlebars layout file, at the {{body}} tag

If you create an about.handlebars with

<h1>about</h1>

And a home.handlebars with

<h1>Home</h1>

then running your app and going to /about and / should show the difference