I am using News API in ReactJS for fetching news using fetch API.

CODE FRAGMENT

const url = `https://newsapi.org/v2/top-headlines?country=in&category=${this.props.category}&pageSize=${this.state.pageSize}&page=${this.state.page}`;
let data = await fetch(url);

But when I run it on the localhost, it gave an error 400 saying:

{status: 'error', code: 'userAgentMissing', message: 'Please set your User-Agent header to identify your application. Anonymous requests are not allowed.'}

When I searched the same on Stack Overflow, I got a link of a similar problem here:

User Agent Missing error when making a get request to an API

Then I added the User-Agent header in the fetch API's argument:

CODE FRAGMENT

headers = new Headers({
        "X-Api-Key": this.apiKey,
        "User-Agent": navigator.userAgent
    });
const url = `https://newsapi.org/v2/top-headlines?country=in&category=${this.props.category}&pageSize=${this.state.pageSize}&page=${this.state.page}`;
let data = await fetch(url, {
            headers: this.headers
        });

But still it shows the same error:

{status: 'error', code: 'userAgentMissing', message: 'Please set your User-Agent header to identify your application. Anonymous requests are not allowed.'}

This error is asking for "User-Agent" in the request header, but it is already there! When I looked into the network section of the chrome browser.

So, what's exactly the problem is? And how to solve this issue?