As can be seen from the image, I am getting error lines under element.url etc. from line no. 62. I am fetching data from news api and in result I am getting json response which looks like this. I am passing these title, description etc. from api response to another component in my react app as props.

Now the error says this :

any | Property 'title' does not exist on type 'never'.ts(2339)

So my question is; is there a way I can declare the rest of the fields of the json data so my editor doesn't give this error? Here is my code....

constructor(props) {
    super(props);
    this.state = {
        articles: [],
        totalResults: 0,
        loading: false,
        page: 1,
    };
}

async componentDidMount() {
    let apiKey = `https://newsapi.org/v2/top-headlines?country=in&apiKey=7e87c89bfbbd4b8b8bb0721d45a6d454&pageSize=18&page=${this.state.page}`;
    let data = await (await fetch(apiKey)).json();
    this.setState({ articles: data.articles, totalResults: data.totalResults });
}

render() {
    return (
        <div className="container my-4">
            <h2 id="heading">Top headlines of the day</h2>
            <div className="row my-4">
                {this.state.articles.map((element) => {
                    return (
                        <div className="col-md-4 mb-3" key={element.url}>
                            <NewsItem
                                title={element.title}
                                description={element.description}
                                imageUrl={element.urlToImage}
                                more={element.url}
                            />
                        </div>
                    );
                })}
            </div>