Wordpress: Custom search result page throws 404

[admin]

I have followed the link <a href="https://codex.wordpress.org/Creating_a_Search_Page" rel="nofollow noreferrer">here</a> in codex and created the following
This is my searchform.php

<form action="/search" method="get" role="search" id="searchform">
    <div class="input-group">
        <input type="text" name="s" id="search" class="form-control search-bar" placeholder="Search Healthkart Blog" value="<?php the_search_query(); ?>">
        <div class="input-group-append button-icon">
            <button class="btn" type="button" id="searchBtn">
                <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/search-icon.png" alt="search" class="search-icon-white">
                <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/search-icon-grey.png" alt="search" class="search-icon-grey">
            </button>
        </div>
    </div>
</form>

I have included it in header.php as

get_search_form();

And the JS for submitting the form in this way

$("#searchBtn").click(function(){
    $("#searchform").submit();
})

I have also created a custom search result page called search.php and it contains the normal search page code. Then I have created a page in wordpress pages called search (URL as /search) and assigned the custom search result template to it.
The issue is when I submit the form, it gets redirected to /search/?s=test123 and returns a 404 page. But if I hit the urls /search/test123, it works.
How do I make the search form submit to the URL /search/test123 ?