How to hide the sidebar and the toolbar in h5web/app in react permanently?

Question

I am trying to visualize h5 files only. and need the slider and the heatmap. I have tried achieving the same with h5web/lib but the image showing does not match and not clear enough.

const getData = async () => {
    const dataPath = `/DATA`; 
    const selection = sliderValue;
    const flatten = false;
    axios({
      url: `${url}/h5/data/?path=${dataPath}&selection=${selection}&flatten=${flatten}&resolve_links=only_valid&file=${fileName}`,
      method: "GET",
      responseType: "arraybuffer",
      headers: {
        "Content-Type": "application/octet-stream",
      },
      decompress: false,
    })
      .then((response) => {
        const data = response.data;

        const uint8Array = new Uint8Array(data);
        const valid_length = uint8Array.length - (uint8Array.length % 4);
        const trimmed_array = uint8Array.slice(0, valid_length);
        if (shape) {
          const data8Arr = ndarray(trimmed_array, [shape[1], shape[2]]);
          dispatch(updateFileArray(data8Arr));
          const domain_d = getDomain(data8Arr);

          {
            domain_d && dispatch(updateDomain(domain_d));
          }
          setDomain(domain_d);
        }
      })
      .catch((err) => {
        console.error("Error", err);
      });
  };
<VisCanvas>
<HeatmapMesh
               magFilter={1006}
               values={fileArray}
               domain={domain}
               scaleType={scaleType}
               colorMap={color}
               isMesh={true}
               onClick={() => {
                 setPersistedDataSelection(undefined);
               }}
            />
</VisCanvas>

This is what appears with heatmapmesh