(This error is occuring after adding “react-top-loading-bar”) inside the project.
I have used (- npm i react-top-loading-bar) and also tried (npm i react-top-loading-bar -f) still same error

I tried to figure it out but couldn’t able to find the error in the code. Please help me

App.js(code)

import './App.css';
import React, { Component } from 'react'
import NavBar from './components/NavBar';
import News from './components/News';
import LoadingBar from 'react-top-loading-bar'
import {
  BrowserRouter,
  Route,
  Routes
} from "react-router-dom";

export default class App extends Component {
  pageSize=10;

  state = {
    progress: 0
  }

  setProgress = (progress)=> {
    this.setState({
      progress: progress
    })
  }
  render() {
    return (
      <div>
      <BrowserRouter>
      <NavBar/>
      <LoadingBar
        color='#f11946'
        progress={this.state.progress}
        
      />
      <Routes>
      <Route exact path="/general" element={<News setProgress= {this.setProgress} pageSize={this.pageSize} key='general' country='in' category='general'/>}></Route>
      <Route exact path="/" element={<News setProgress= {this.setProgress} pageSize={this.pageSize} key='general' country='in' category='general'/>}></Route>
         <Route exact path="/business" element={<News setProgress= {this.setProgress} pageSize={this.pageSize} key='business' country='in' category='business'/>}></Route>
         <Route exact path="/entertainment" element={<News setProgress= {this.setProgress} pageSize={this.pageSize} key='entertainment' country='in' category='entertainment'/>}></Route>
         <Route exact path="/health" element={<News setProgress= {this.setProgress} pageSize={this.pageSize} key='health' country='in' category='health'/>}></Route>
         <Route exact path="/science" element={<News setProgress= {this.setProgress} pageSize={this.pageSize} key='science' country='in' category='science'/>}></Route>
         <Route exact path="/sports" element={<News setProgress= {this.setProgress} pageSize={this.pageSize} key='sports' country='in' category='sports'/>}></Route>
         <Route exact path="/technology" element={<News setProgress= {this.setProgress} pageSize={this.pageSize} key='technology' country='in' category='technology'/>}></Route>  
       </Routes>
     </BrowserRouter>
     </div>
    )
  }
}

News.js(code)

import React, { Component } from 'react'
import NewsItem from './NewsItem'
import Spinner from './Spinner';
import PropTypes from 'prop-types'
import InfiniteScroll from "react-infinite-scroll-component";


export class News extends Component {


  static defaultProps = {
    country: 'in',
    pageSize: 8,
    category: 'general'
  }
  static propTypes = {
    country : PropTypes.string,
    pageSize: PropTypes.number,
    category: PropTypes.string 
  }
  capitalizeFirstLetter =(string)=> {
     return string.charAt(0).toUpperCase() + string.slice(1)
  }

  constructor(props) {
    super(props);
    console.log("Hello i am constructor from news component");
    this.state = {
     
      articles: [],
      loading: true,
      page:1 ,
      totalResults: 0
    }
    document.title= `${this.capitalizeFirstLetter(this.props.category)} - NewsMonkey`
  }

  async updateNews() {
    this.props.setProgress(10);
    let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey={hidden}&page=${this.state.page}&pageSize=${this.props.pageSize}`;
    this.setState({loading: true})
    let data = await fetch(url);
    this.props.setProgress(30);
    let parseData = await data.json();
    this.props.setProgress(70);
    console.log(parseData); 
    this.setState({
      articles : parseData.articles,
      totalResults : parseData.totalResults,
      loading: false
    }) 
    this.props.setProgress(100);
}

  async componentDidMount() {
    
    this.updateNews()
 
    
  }

  

  fetchMoreData = async() => {
       this.setState({page: this.state.page+1})
       let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey={hidden}&page=${this.state.page}&pageSize=${this.props.pageSize}`;
      
       let data = await fetch(url);
       let parseData = await data.json();
       console.log(parseData);
       this.setState({
         articles : this.state.articles.concat(parseData.articles),
         totalResults : parseData.totalResults,
        
       }) 
  };
  


  render() {
    return (
     
        <>
       
        
         <h1 className='text-center' style={{margin:'85px 0px'}}>News Monkey- Top {this.capitalizeFirstLetter(this.props.category)} Headlines </h1>
       

          {this.state.loading &&<Spinner/>} 

         <InfiniteScroll
          dataLength={this.state.articles.length}
          next={this.fetchMoreData}
          hasMore={this.state.articles.length !== this.state.totalResults}
          loader={<Spinner/>}>

            <div className='container'>
          <div className="row">
          
            {this.state.articles.map((element)=> {
              return <div className="col-md-4" key={element.url}>
              <News setProgress= {this.setProgress}Item title={element.title? element.title.slice(0,45):""} description={element.description?element.description.slice(0,75):""} imageUrl ={element.urlToImage} newsUrl={element.url}
              author={element.author?element.author: "Unknown Author"} date={element.publishedAt} source={element.source.name}/>
              </div> 
            })}
          </div>
          </div>
    
          </InfiniteScroll>
          
        
        </>
    )
  }
}

export default News