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?

>Solution :

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