TypeError: this.$el.bracket не является функцией

Я пробовал каждый ответ, который я могу найти в течение нескольких часов... Любая помощь очень ценится!

Я пытаюсь использовать jQuery Tournament Bracket в своем реагирующем компоненте. Я пытался импортировать jquery, например import $ from "jquery";, который работает, как и ожидалось, но когда я делаю import "jquery-bracket/dist/jquery.bracket.min.js" или даже import "jquery-bracket", я вижу следующую ошибку в своем браузере.

TypeError: this.$el.bracket is not a function

Я следил за этим руководством о том, как реализовать плагин jQuery в React. Ниже приведен код компонента, о котором я тоже говорю.

import React from 'react';
import axios from 'axios';

import $ from "jquery";

// Tried //
// import jQueryBracket from "jquery-bracket/dist/jquery.bracket.min.js";
// import "jquery-bracket/dist/jquery.bracket.min.js";
// Currently using //
import "jquery-bracket/dist/jquery.bracket.min.js";


class Bracket extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            teams: "",
            scores: ""
        };
    }

    componentDidMount() {
        let minimalData = {
            teams: [
                ["Team 1", "Team 2"],
                ["Team 3", null],
                ["Team 4", null],
                ["Team 5", null]
            ],
            results: [
                [
                    [[1, 0], [null, null], [null, null], [null, null]],
                    [[null, null], [1, 4]],
                    [[null, null], [null, null]]
                ]
            ]
        }

        let resizeParameters = {
            teamWidth: 100,
            scoreWidth: 30,
            matchMargin: 25,
            roundMargin: 45,
            init: minimalData
        };

        this.$el = $(this.el);
        this.$el.bracket(resizeParameters);
        // $("#bracket").bracket(resizeParameters);
    }

    render() {
        return (
            <>
                <div ref = {el => this.el = el}>Bracket goes here...</div>
                {/*<div id = "bracket"></div>*/}
            </>

        )
    }
}

export default Bracket;