Uncaught TypeError: Cannot read properties of undefined (reading 'map') Why this occurred after doing all the possible ways to solve

Question

I'm using API key to iterate the data, I am getting this error again and again. I did all possible ways to solve it. I made array named articles to store all the data in it and then iterated it. It was run perfectly when I manually fetch data in it by an array but when I used API it started giving me this error.

    import Newsitem from './Newsitem'

    export class News extends Component {
      articles = [];

      constructor() {
        super();
        this.state = {
          articles: this.articles,
          loading: false
        }
      }

      async componentDidMount() {
        let url = `https://newsapi.org/v2/top-headlines? 
                   country=in&category=business&apiKey=549bc58bb2fd419088ac863611e7339e`;
        let data = await fetch(url);
        let parsedData = await data.json()
        console.log(parsedData);
        this.setState({
          articles: parsedData.articles
        })
      }
     
      render() {
        return (
          <>
            <div className='container my-3'>
              <h1>News of the day - in Nutshell</h1>
              <div className="row my-4">
                {this.setState.articles.map((element) => {
                  return <div className="col-md-4 my-3" key={element.url}>
                    <Newsitem title={element.title ? element.title.slice(0, 45) : ""} 
     discription={element.description ? element.description.slice(0, 88) : ""} imgUrl= 
   {element.urlToImage} newsUrl={element.url} />
                  </div>;
                })}
              </div>
            </div>
          </>
        )
      }
    }

    export default News```

I tried all possible ways to fix this but didn't work anything of them.
Why it