Why do I get this error – Compiled with problems: Module not found: Error: Can't resolve 'react-top-loading-bar' while installing top-loading-bar

I want a top loading bar on my page but I keep getting a bunch of errors when I tried to install the npm.
this is the command I used-

npm install --save react-top-loading-bar

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

and the errors in my terminal-

picture of the terminal

and the error on my browser

picture of the browser

>Solution :

These are upstream dependency issues from the package you’re trying to fetch while your project has a different version of react.

I get these a lot too with older packages now while working in react 18 projects.

You can install with a force:

npm install --save react-top-loading-bar -f