trying to fetch data using api in react using class based component but don't know why data are not fetching

Question

App.js

 from "react-router-dom";
import React, { Component } from "react";
import News from "./components/News";
export class App extends Component {
  render() {
    return (
      <div>
        
        <News category="sport"/>
      </div>
    );
  }
}

export default App;

unable to fetch data from api showing null in console what is the problem in below code

  async componentDidMount(){
console.log('cdm'); //run after render
let url=`https://newsapi.org/v2/top-headlines?country=us&category=${this.state.category}&apiKey=2149fa5916ca4eae8452f3335ad55084&pageSize=${this.props.pageSize}`;
let data=await fetch(url);
let parsedData = await data.json();
console.log(parsedData);
this.setState({
  articles:parsedData.articles,
  totalResults:parsedData.totalResults
})
  }

when I am not using the category property the data are fetching well but when I am using the category, no data is fetching what is the problem with category?

While not using category

let url=`https://newsapi.org/v2/top-headlines?country=us&apiKey=2149fa5916ca4eae8452f3335ad55084&pageSize=${this.props.pageSize}`;

while using the category

let url=`https://newsapi.org/v2/top-headlines?country=us&category=${this.state.category}&apiKey=2149fa5916ca4eae8452f3335ad55084&pageSize=${this.props.pageSize}`;