App.js

import React, {
  useRef,
  useLayoutEffect
} from "react";
import "./styles.css";
import { init } from "universalviewer";


const UV = ({manifest, width = '100vw', height = '100vh'}) => {
  const el = useRef();

  console.log(el)
  useLayoutEffect(() => {

    const uv = init(el.current,
      {
        manifestUri: manifest,
        dataLightbox:false,
        rotation: 0,
        configUri: "/config.json" // This is where I am experiencing issues. */
      });

    uv.on('created', () => {
      uv.resize();
    }, false);

  }, [manifest]);

  return <div ref={el} id="uv" className="uv" style={{
    width: width,
    height: height,
  }} />;
};

export default function App() {
  return (
    <UV manifest="https://wellcomelibrary.org/iiif/b18035723/manifest" data-lightbox="true" />
  );
}

config.json

{
  "options": {
    "dropEnabled": true,
    "footerPanelEnabled": false,
    "headerPanelEnabled": true,
    "leftPanelEnabled": false,
    "limitLocales": false,
    "overrideFullScreen": false,
    "pagingEnabled": true,
    "rightPanelEnabled": true
  },
  "modules": {
    "headerPanel": {
      "options": {
        "localeToggleEnabled": false
      }
    },
    "seadragonCenterPanel": {
      "options": {
        "autoHideControls": true
      }
    },
    "footerPanel": {
      "options":{
        "downloadEnabled": false
      }
    }
  }
}