I have an APIs which returns File(byte[], "application/pdf") | byte[] from server.

In the frontend part, I create a request and can save this file like a pdf file to a computer, but I need to store this file(State or some other way) and render inside react component like PDF file, it's can be put on iframe or some another way(for me it's doesn't matter, just need render inside component after getting the file from API).

 const instance = axios.create({
  baseURL: process.env.REACT_APP_API_ROOT,
  headers: {
    "Content-Type": "application/json",
  },
});

    function getPdfByFileName(fileName: string): any {
  return instance.get(`pdfs/${fileName}`);
}

function getPdfAsBlobByFileName(fileName: string): any {
  return instance.get(`pdfs/${fileName}/array`);
}

 useEffect(() => {
      getPdfByFileName("fileName")
        .then((response: AxiosResponse) => {
          // const file = new Blob([response.data], { type: "application/pdf" }); // For  API which returns blob
          setPdf(response.data); // Need store file and correct render like PDF
        })
        .catch((err: AxiosError) => {
         // process err
        });
    }
  }, []);

     return (
    <div>
      <iframe title="pdf" width="100%" height="600px" srcDoc={pdf}></iframe>
    </div>
  );

The result: Inside component I render the data but it's no PDF

I'm tryed:

1. use "Content-Type": "application/pdf" inside these requests.
2. Put the URL to file inside Iframe src attribute(it's works fine for Anonymous but we have Bearer and need to secure the data).
3. Generate URL from blob API response and put to Iframe(not works).
4. Different pdf viewers, they work fine with physical PDF files based on the path to file but don't work in my case.

Thanks for any help.