nodejs list only shows items after refresh - html

Question

I have a list thats nested inside a list, I made it with NodeJS, Express, EJS and MongoDB.
creating the first list works, however when creating items in the second list, they only appear after I refresh the website or create another item (creating an item automatically refreshes and site), I have struggled with this bug for a few day now, please dont laugh at me if its something stupid I am fairly new and this is my first real project.
route for the custom list
app.route("/BucketList/:customListID")
.get(function (req, res) {
previousRoute = "/BucketList";
if (req.isAuthenticated()) {
loggedIn = true;
const customListID = req.params.customListID;
const customListName = req.params.customListName
Country.findOne({ _id: customListID }, function (err, foundList) {
if (!err) {
if (!foundList) {
res.redirect("/BucketList")
} else {
foundList.save();
res.render("list", { customListID: customListID, customListName: customListName, customListCode: foundList.code, newListItems: foundList.items });
}
} else {
console.log(err);
}
})
} else {
loggedIn = false;
res.redirect("/login");
}
})
.post(function (req, res) {
const customListID = req.params.customListID;
const customListName = req.params.customListName;
const itemName = req.body.newItem;
const item = new Item({
name: itemName
});
Country.findOne({ _id: customListID }, function (err, foundList) {
foundList.items.push(item);
foundList.save();
res.redirect("/BucketList/" + customListID);
});
})
<section class="vh-100" style="background-color: hsl(0, 0%, 100%);">
<div class="container py-5">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card" style="border-radius: 15px;">
<div class="card-body p-5">
<form class="d-flex justify-content-center align-items-center mb-4"
action="/BucketList/<%=customListID%>" method="post">
<div class="form-outline flex-fill">
<input type="text" id="form3" class="form-control form-control-lg" name="newItem"
placeholder="New Item" autocomplete="off" />
</div>
<button type="submit" class="btn btn-primary btn-lg ms-2" name="list"
value="<%= customListID %>">Add</button>
</form>
<% newListItems.forEach(function(item) { %>
<ul class="list-group mb-0">
<li
class="list-group-item d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
<div class="d-flex align-items-center">
<input class="form-check-input me-2" type="checkbox" value=""
aria-label="..." />
<%=item.name%>
</div>
<form action="/deleteItem" method="post">
<button type="submit" id="item-remove-button" title="Remove item"
name="itemDeleteButton" value="<%= item._id %>"
onchange="this.form.submit()">
<i class=" fas fa-times text-primary"></i>
</button>
<input type="hidden" name="listID" value="<%= customListID %>"></input>
</form>
</li>
</ul>
<% }) %>
</div>
</div>
</div>
</div>
</div>
</section>