jQuery isn't detected on Textillate.js

I got an error message on my React like this:

jQuery is not defined
ReferenceError: jQuery is not defined
    at ./node_modules/textillate/jquery.textillate.js (http://localhost:3000/static/js/bundle.js:56432:4)
    at options.factory (http://localhost:3000/static/js/bundle.js:94556:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:94001:33)
    at fn (http://localhost:3000/static/js/bundle.js:94213:21)
    at ./src/components/javascripts/Textillate.js (http://localhost:3000/static/js/bundle.js:1300:68)
    at options.factory (http://localhost:3000/static/js/bundle.js:94556:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:94001:33)
    at fn (http://localhost:3000/static/js/bundle.js:94213:21)
    at ./src/components/About.jsx (http://localhost:3000/static/js/bundle.js:178:81)
    at options.factory (http://localhost:3000/static/js/bundle.js:94556:31)

Which is kinda weird because I already installed both jQuery and Textillate.js with npm. The code looks like this:

Textillate.js

import $ from 'jquery';
import 'textillate';

const Textillate = () => {
    $('.text').textillate({
        in: {
            effect: 'flash',
            delayScale: 1,
            delay: 25,
            sequence: true
        }
    });
}
export default Textillate;

About.jsx

import Text from './javascripts/Textillate';

const About = () => {
    React.useEffect(() => {
        Text();
    }, []);
    return (
        <div>
           <h1 className="text">
              abcdefg
           </h1>
        </div>
    )
}
export default About;

Does anyone know what caused this?

So I made a change in the About.jsx which involved a package called textillate-react without using jquery and stuff.

import { Textillate } from 'textillate-react';

const About = () => {
    return (
        <div>
            <h1>
                <Textillate
                    option={{
                        in: {
                            effect: 'flash',
                            delayScale: 1,
                            delay: 7,
                            shuffle: true
                        }
                    }}
                >
                    abcdefg
                </Textillate>
            </h1>
        </div>
    )
}
export default About;

But version nerds (like me) would be unsatisfied with this answer because it injects our document with scripts which are jQuery with version 3.6.0 (not the latest) and another old version of Javascript libraries (Textillate, Lettering, etc.). So I also made an alternative which I was helped by Fraser and could be updated by ncu -u

Textillate.js

import $ from 'jquery';
import 'animate.css';
window.jQuery = $;
require('textillate');
require('letteringjs');

const Textillate = () => {
    $('h1').textillate({
        in: {
            effect: 'animate__animated animate__flash',
            //I can't use flash animation by only 'flash' since I used animate.css 
            //manually, it's based on pure animate.css prefixes and suffixes.
            delayScale: 1,
            delay: 7,
            shuffle: true
        }
    });
}
export default Textillate;