Blob type application/pdf showing an empty blank page in javascript(react)

I have been facing some issue regarding Blob file convertion in react js application

I’m fetching data from the server with the help of axios package

after fetching data from the server then response would be looks like this

Like wise i have converted that response data by including in Blob constructor function
here it is

const blob = new Blob([data], { type: "application/pdf" });

After that convertion im showing that blob as a src url inside the ifame tag

so that will look like this

<div className="card " style={{ height: "100vh" }}>
      {loading && <SimpleLoader />}

      {!loading && fileBlob && (
        <iframe
          title="File Viewer"
          width="100%"
          height="100%"
          src={URL.createObjectURL(fileBlob)}
        />
      )}
    </div>

what ever i did it still showing the same issue, i got always blank pdf page

eventhough after adding {responseType : blob} issue was still existed

here is that api function

export function getFileAccessView(hashCode: string) {
  return axios.post(`authentication/${hashCode}`, {
    responseType: "blob",
  });
}

how do i fix this error

for better understanding i have pasted entire component below

const ViewFile: FC<Props> = () => {
  // @ts-ignore
  const { state }: LocationOrderfileDetails = useLocation();
  const fileDetails: urlParams = state.orderFileDetails || {};
  const [loading, setLoading] = useState<boolean>(false);
  const [fileBlob, setFileBlob] = useState<Blob | null>(null);
  const viewFileAPI = () => {
    setLoading(true);
    getFileAccessView(fileDetails.hashCode) // axios api =>  return axios.post('path')
      .then(({ data }) => {
        console.log(data);

        //   data looks like this
        //           %PDF-1.7
        // %�쏢
        // 5 0 obj
        // <</Length 6 0 R/Filter /FlateDecode>>
        // stream
        // x���o]�qMҒHB�d>d[��$˺W�=��C��j�
        //   įB��X�d:�Wz9ı��bp�J��V����6u@����㑦���9�MZG�Gv�AG+9�R�<����_vۘm��Oi�nl����]��GV�9�k��팿��G�q�x��<k�����v&&;a�Sb��.jȯ]�3ɧ�yf��l��C��=?~���F��vi��5&��A(g�0+Є�I��2M���>�!

        const blob = new Blob([data], { type: "application/pdf" });
        setFileBlob(blob); // set blob to state
      })
      .catch(() => {})
      .finally(() => {
        setLoading(false);
      });
  };
  useEffect(() => {
    viewFileAPI();
  }, [fileDetails.hashCode]); // based on hasCode value fetch the data

  return (
    <div className="card " style={{ height: "100vh" }}>
      {loading && <SimpleLoader />}

      {!loading && fileBlob && (
        <iframe
          title="File Viewer"
          width="100%"
          height="100%"
          src={URL.createObjectURL(fileBlob)}
        />
      )}
    </div>
  );
};

export default ViewFile;

please currect me if i did any mistake in the code