jquery script not being instantiated properly

I am trying to implement an overlay on a page, however I dont think I am instantiating my code correctly?

Use case:

• when user click search icon on a page, it displays an overlay
• when the overlay is displayed, user can click close button to remove the overlay

Problem:
When I refresh and view my js code in the browser, my overlay is already being visibly displayed, which shouldn’t before I click the search icon, so am I not instantiating properly?

Although, I am calling both ‘openOverlay’ and ‘closeOverlay’ functions in the events() function in my Search.js which should trigger it…

dev environment:

• node.js with webpack
• scripts.js: imports main css file and instantiate modules
• Search.js with my overlay code (imports jquery and exports default Search)

scripts.js

import "../css/styles.css"

// modules
import Search from "./modules/Search"

//instantiate new object using modules/classes
const search = new Search()

// Allow new JS and CSS to load in browser without a traditional page refresh
if (module.hot) {
  module.hot.accept()
}

Search.js

import $ from 'jquery';


//alert("helo there");

function Search(){
    //describe/create object
    var openButton = $(".js-search-trigger");
    var closeButton = $(".s-overlay__close");
    var searchOverlay = $(".s-overlay");

    //events
    function events() {
        openButton.on("click", openOverlay);
        closeButton.on("click", closeOverlay);
    };
    events();
    
    //methods
    function openOverlay(){
        searchOverlay.addClass("s-overlay--active");
    };
    function closeOverlay(){
        searchOverlay.removeClass("s-overlay--active");
    };
}
export default Search;

html:

<div class="s-overlay s-overlay--active">
    <div class="s-overlay__top">
        <div class="s-container">
            <i class="s-overlay__icon" aria-hidden="true">
                <svg>...</svg>
            </i>
            <input id="search-term" class="search-term" type="text" placeholder="What are looking for?">
            <i class="s-overlay__close" aria-hidden="true">
                <svg>...</svg>
            </i>
        </div>
    </div>
</div>

css:

.s-overlay { overflow-y: auto; overflow-x: hidden; z-index: 110; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.96); visibility: hidden; opacity: 0; transform: scale(1.09); transition: opacity 0.3s, transform 0.3s, visibility 0.3s; box-sizing: border-box;}
.s-overlay--active { visibility: visible; opacity: 1; transform: scale(1);}
.s-overlay__top {  margin-top: 32px; position: relative; padding: 1em; background-color: rgba(0, 0, 0, 0.12); }
.s-overlay__icon { line-height: 0; display: block; }
.s-overlay__close {margin-left: auto; line-height: 0; display: block; transition: all 0.3s;}
.s-overlay__close:hover { opacity: 1; }