How to add header params to Iframe in ReactJS

Question

I am trying to add an iframe component in my React application. But I need to add an Authentication key to url.

I am new to React, I am trying this way:

import React, {useEffect, useState} from 'react';

function IframeComp() {
  const [content, setContent] = useState('');


  useEffect(() => {
    // Fetch the content using the method of your choice
    const fetchedContent = '<h1>Some HTML</h1>';
    setContent(fetchedContent);
  }, []);


  return (
      <iframe sandbox id="inlineFrameExample"
              title="Inline Frame Example"
              width="300"
              height="200"
              src={content}>
      </iframe>
  );
}

export default IframeComp;

I found solution in Stack Overflow (Is it possible to add Request Headers to an iframe src request?) (https://github.com/courajs/pdf-poc/blob/master/script.js) but it is not in React.

I thinks I have to do something like this:

var xhr = new XMLHttpRequest();

  xhr.open('GET', url);
  xhr.onreadystatechange = handler;
  xhr.responseType = 'blob';
  headers.forEach(function(header) {
    xhr.setRequestHeader('Authorization', 'JWT eyJ0eXAiOiJK');
  });
  xhr.send();

Am I on the right track?