TypeError: Cannot read properties of undefined (reading 'map') I'm getting error in these lines

Question

import React, { Component } from 'react' import NewsItem from './NewsItem' import { Spinner } from './Spinner'; import PropTypes from 'prop-types'

export class News extends Component { static defaultProps = { country : 'in', pageSize : 8, category: 'General' }

    static propTypes = {
      country : PropTypes.string,
      pageSize : PropTypes.number,
      category: PropTypes.string
    }


    constructor() {
          super();
          this.state ={
              articles: [],
              loading: true,
              page: 1
          }
      }

      async updateNews(){
        const url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apikey=dbe57b028aeb41e285a226a94865f7a7&page=${this.state.page}&pageSize=${this.props.pageSize}`;
        this.setState({ loading: true });
        let data = await fetch(url);
        let parsedData = await data.json()
        this.setState({
            articles: parsedData.articles,
            totalResults: parsedData.totalResults,
            loading: false
        })
    }
      async componentDidMount(){
        this.updateNews();
      }

      handelPreviousClick = async()=>{
        this.setState({page : this.state.page - 1});
        this.updateNews();
      }

      handelNextClick = async()=>{
        this.setState({ page: this.state.page + 1});
        this.updateNews();
      }
    
    render(){
    return ( 
      <div>
           <div className='container my-3'>
                <h1 className='text-center' style={{color: "#404040"}}><b>THENewsWorld</b> - Top Headlines</h1>
                {this.state.loading && this.state.loading && <Spinner/>}
                **<div className="row">
                {!this.state.loading && this.state.articles.map((element)=>{**
                return <div key={element.url} className="col-md-4">
                <NewsItem key={element.url} title={element.title?element.title.slice(0,40):""} description={element.description?element.description:""} imageUrl={element.urlToImage} newsUrl={element.url} author={element.author} date={element.publishedAt} source={element.source.name}/>     
                </div>
                })}
                </div>
           </div>
           <div className='container d-flex justify-content-between'>
           <button disabled={this.state.page<=1} type="button" className="btn btn-dark" onClick={this.handelPreviousClick}>&#8592; Previous</button>
           <button  disabled={this.state.page + 1> Math.ceil(this.state.totalResults/this.props.pageSize)} type="button" className="btn btn-warning" onClick={this.handelNextClick}>Next &#8594;</button>
           </div>
      </div>
    )
  }
}

I'm getting error in these bold lines and my code work properly but suddenly it start giving these errors....