#Scripts.Render("~/bundles/jqueryval") breaking Bootstrap - asp.net

Question

I have used a template for my project which has a burger menu that shrinks in small screen. But whenever I try to validate a form using #Scripts.Render("~/bundles/jqueryval"), the bootstrap doesnt work as intended. And if I were to remove #Scripts.Render("~/bundles/jqueryval"), the form doesnt validate but bootstrap starts working.
Here is my section script:
#section Scripts{
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.13.2.min.js"></script>
<script>
$(document.ready(function () {
$("#ContractDate").datepicker({ dateFormat: 'dd/mm/yyyy' });
}))
</script>
#Scripts.Render("~/bundles/jqueryval")
}
and here is a sample of my form:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Company</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CompanyName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CompanyName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CompanyName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Address, "", new { #class = "text-danger" })
</div>
</div>
I am working on .net framework 4.8