animating multiple text using react

I'm trying to fade in and fade out multiple texts using jquery in react but I'm getting the error that Line 46:6: 'jquery' is not defined no-undef even though I did npm i jquery --save. How do I run this small piece of jquery code with react or is there any library through which I can achieve a similar effect?

this is the effect that I was trying to add into the react project -> codepen

import React, { useEffect } from "react";
import $ from "jquery";
import "./App.css";
export const App = () => {
  (function ($) {
    $.fn.extend({
      rotaterator: function (options) {
        var defaults = {
          fadeSpeed: 900,
          pauseSpeed: 900,
          child: null,
        };

        var options = $.extend(defaults, options);

        return this.each(function () {
          var o = options;
          var obj = $(this);
          var items = $(obj.children(), obj);
          items.each(function () {
            $(this).hide();
          });
          if (!o.child) {
            var next = $(obj).children(":first");
          } else {
            var next = o.child;
          }
          $(next).fadeIn(o.fadeSpeed, function () {
            $(next)
              .delay(o.pauseSpeed)
              .fadeOut(o.fadeSpeed, function () {
                var next = $(this).next();
                if (next.length == 0) {
                  next = $(obj).children(":first");
                }
                $(obj).rotaterator({
                  child: next,
                  fadeSpeed: o.fadeSpeed,
                  pauseSpeed: o.pauseSpeed,
                });
              });
          });
        });
      },
    });
  })(jquery);

  $(document).ready(function () {
    $("#rotate").rotaterator({ fadeSpeed: 900, pauseSpeed: 200 });
  });
  return (
 <div className="awards">
        <div className="awardHead">Awards</div>
        <img
          src="./images/trophy.jpg"
          width="300px"
          alt=""
          className="awardPhoto"
        />
        <div id="rotate">
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
           <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>

          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
        </div>
      </div>
);
};