Не удается импортировать Materialize CSS JS React

Доброе утро всем,

Я изо всех сил пытался заставить материализовать css для работы в моем приложении для реакции, в частности, с файлами Javascript.

Я пробовал несколько способов, но, как мне кажется, я продвинулся дальше.

В моем файле "landingpage.js":

import React, { Component } from 'react';
import './styles/css/custom.css';
import $ from 'jquery';
import 'materialize-css'; // It installs the JS asset only
import '../node_modules/materialize-css/js/modal';

Цель состоит в том, чтобы открыть простое всплывающее окно (чтобы я мог проверить, правильно ли импортируется JS)

            <div>
            <a class = "waves-effect waves-light btn modal-trigger" href = "#modal1">Modal</a>
            <div id = "modal1" class = "modal">
                <div class = "modal-content">
                <h4>Modal Header</h4>
                <p>A bunch of text</p>
                </div>
                <div class = "modal-footer">
                <a href = "#!" class = "modal-close waves-effect waves-green btn-flat">Agree</a>
                </div>
            </div>    
        </div>

Итак, как только компонент смонтируется:

   componentDidMount() {
    $('.modal').modal();
}

Однако когда я нажимаю кнопку, должно открываться всплывающее окно:

ReferenceError: Component is not defined

Эта ошибка возникает в файле JS, который я пытаюсь импортировать.

Я пробовал импортировать разными способами, и приложение даже ничего не распознало. Я пытался импортировать это в течение двух дней и много искал в Интернете, я делаю это для проекта School Final, пытаясь самостоятельно научиться реагировать.

Вот ссылка на фреймворк, который я пытаюсь импортировать:

https://materializecss.com/modals.html#!

Спасибо за ваше время.