I have two JS files called main.js and load.js.

In main.js I have:

function removeItem() {
  alert('Item removed');
}
(function($) {  
    $(document).ready(function() {
    });
})(jQuery);

In load.js I have:

(function($) {  
    $(document).ready(function() {
      removeItem();
    });
})(jQuery);

My files are loaded in this order:

<script type='text/javascript' src='https://code.jquery.com/jquery-3.6.0.min.js?ver=3.6.0' id='script-jquery-js'></script>
<script type='text/javascript' src='url/wp-content/themes/theme/assets/js/main.js?ver=1.0' id='script-js'></script>
<script type='text/javascript' src='url/wp-content/themes/theme/assets/js/load.js?ver=1.0' id='script-load-js'></script>

It throws me an error:

removeItem() is not defined.

How can I use the function from main.js in load.js?