@Scripts.Render("~/bundles/jqueryval") breaking Bootstrap

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