Getting error in JavaScript(jQuery) code in React Application

i want to use js file in react componnent but i saw this error

OwlCarousel Not a function

I want to use a js file include this lines:

main.js

(function ($) {
"use strict";
 /*---slider activation---*/
var $slider = $('.slider_area');
if($slider.length > 0){
    $slider.owlCarousel({
        animateOut: 'fadeOut',
        autoplay: true,
        loop: true,
        nav: false,
        autoplay: false,
        autoplayTimeout: 8000,
        items: 1,
        dots:true,
    });
}

 })(jQuery);    

I use this code in functional coomponnent:

    useEffect(()=>{

    require('./js/main')
  }
  ,[])

There is another js file that used in in main.js, i want to found how can i define owlCarousel method for this js file from another js file.