Use of docx4js in ReactJS

[AkshayCloudAnalogy]

I am a newbie in React and i am not able to get this working in React. I have use axios to get the response of the file as "arraybuffer" and successfully able to get the data from docx4js.load but i am not able to understand how to render that on the screen.

Here is the code if that might help:

import React, { useEffect } from "react";
import axios from "axios";
import docx4js from "docx4js";

const Docx = ({ previewedRecord, token }) => {
  useEffect(() => {
    axios
      .get(previewedRecord.url, {
        responseType: "arraybuffer",
        headers: {
          Authorization: "Bearer " + token
        }
      })
      .then(res => {
        docx4js.load(res.data).then(docx => {
          console.log("[Docx.jsx] docx:", docx); // I am able to get the data here.
        })
          .catch(err => {
            console.error("[Docx.jsx] err:", err);
          });
      })
      .catch(err => {
        console.error("[Docx.jsx] err:", err);
      });
  }, []);

  return <div id="docx" />; // I want the Docx to be rendered here.
};

export default Docx;

Here is the screenshot of the docx returned:

[lalalic]

you can use docx.render((type,props,children)=><YourComponentForType {...props}/>)