Rendering a new pug template fails in ExpressJS – Blancer.com Tutorials and projects

I’m fairly new to ExpressJS and currently I’m making a sort of basic search engine and I have 2 pug template files called index.pug (the default search page) and search.pug (search results page) and an expressjs file called app.js that handles responses based on the request paths. The default page when a request is sent to the server is index.pug and this is what the server-side app.js contains:

var express = require('express');
var path = require('path');

const app = express();
const port = 3000;

//options
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, '/public/views'));

app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
    res.render('index');
});

app.get('/searchpage', (req, res) => {
    console.log("RECEIVED searchpage")
    var key = req.query.keyword.toLowerCase();
    res.render('search', {keyword: key});
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`)
});

In my index.pug file, if a user presses “Enter”, the browser should render search.pug. Here’s my index.pug:

<!doctype html>
html
    head
        meta(charset="utf-8")
        meta(name="viewport" content="width=device-width, initial-scale=1.0")
        link(rel="stylesheet" href="../stylesheets/index_style.css")
    body
        div#content
            div#search_bar
                input(type="text" id="search" name="search_engine" placeholder="Enter Keyword Here" required)
        script(src="../javascripts/index.js")

Here is the index.js file that runs on the above page.

var search_bar = document.getElementById("search");

search_bar.addEventListener('keypress', getData);

async function getData(evt){
    if (evt.key == "Enter" && search_bar.checkValidity()){
        var search_keyword = search_bar.value;
        try {
            let response = await fetch('http://localhost:3000/searchpage?keyword='+search_keyword);
            if (response.status == 200){
                console.log("Changing Webpage...")   
            }
            else{
                console.log("HTTP return status: "+response.status);
            }
        }
        catch {
            console.log("Fetch Error!");
        }
    }
}

The problem here is that the after pressing enter, search.pug is not rendered.

Here is my simple search.pug:

<!doctype html>
html
    head
        meta(charset="utf-8")
        meta(name="viewport" content="width=device-width, initial-scale=1.0")
    body
        div#search_bar
            input(type="text" id="search" name="search_engine" placeholder="Enter Keyword Here" value= keyword required)

I checked my browser’s network tab after pressing enter on my index.pug and it seems that the GET request was successful and search.pug was received by the browser, but it’s just not rendered :/