[SOLVED] jquery__WEBPACK_IMPORTED_MODULE_2___default(...)(...).owlCarousel is not a function (React)

jquery__WEBPACK_IMPORTED_MODULE_2___default(...)(...).owlCarousel is not a function (React)

I'm making a web-application where I need a owl-carousel to be implemented.

My component "TopEventSection.jsx" file:

import React, { useEffect } from "react";
import img from "../images/date.svg";
import 'jquery';
import $ from 'jquery'
import 'owl.carousel'

export default function TopEventSection() {

    useEffect(() => {
        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            }
        });
    }, []);

    return (
        <div className="top-event-section">
            <div className="container">
                <h2><span className="header-blue">ТОП</span> події:</h2>
                <div className="owl-carousel">
                    <div className="item"><img src={img} alt="img1" /></div>
                    <div className="item"><img src={img} alt="img2" /></div>
                    <div className="item"><img src={img} alt="img3" /></div>
                </div>
            </div>
        </div>
    )
}

I've also checked the package.json for these dependecies. They are installed. I've also imported jquery and owl-carousel into index.html:

  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
    crossorigin="anonymous"></script>
  <script src="owlcarousel/owl.carousel.min.js"></script>

Nothing of these have worked...

Solution