Jsdoc and better-docs for React producing broken links in html docs

Question

I am trying to use Jsdoc and better-docs to document my React project. I used the jsdoc command line to create a documentation folder and included the command as a script in package.json. The code for the app is in this Github link: https://github.com/shivkiyer/accordion-player

I have committed the documentation folder, and though it does include some documentation, the link to the React component is broken. The file however does exist and I can open it separately in a browser. But trying to navigate to the React Component from the homepage doesn't work.

In comparison, compodoc for Angular produces elegant documentation. Is there a similar package for React? That graph depiction of the Angular app by compodoc is super cool.

UPDATE - The React Component

import useWindowDimensions from '../../hooks/useWindowDimensions';
import getVideoDimensions from '../../common/utils/getVideoDimensions';
import styles from './video-player.module.scss';

/**
 * Container for the video and user controls that has either
 * a specified width or height, or scales according to the
 * browser window size.
 *
 * @param {number} width The width of the container (optional)
 * @param {number} height The height of the container (optional)
 * @returns {ReactNode} A react element with fixed height and width
 *
 * @component
 * @example
 * Use with only width to produce container of fixed width
 * <Video Player width="300" />
 *
 * @component
 * @example
 * Use with only height to produce container of fixed height
 * <Video Player height="300" />
 *
 * @component
 * @example
 * Use without any inputs to scale to browser window
 * <Video Player />
 *
 */
export default function VideoPlayer({ width, height }) {
  const { width: windowWidth, height: windowHeight } = useWindowDimensions();

  const { playerWidth, playerHeight, marginTop } = getVideoDimensions({
    width,
    height,
    maxWidth: windowWidth,
    maxHeight: windowHeight,
  });

  const playerStyle = {
    width: `${playerWidth}px`,
    height: `${playerHeight}px`,
    marginTop: `${marginTop}px`,
  };
  return (
    <div className={styles.videoPlayer} style={{ ...playerStyle }}>
      This is video player box
    </div>
  );
}

This is the scripts in package.json:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "doc": "jsdoc src -r -c jsdoc.conf.json -d documentation"
},

This is the jsdoc.conf.json:

{
  "source": {
    "include": ["src"],
    "includePattern": ".+\\.jsx?$"
  },
  "plugins": ["plugins/markdown", "better-docs/component"],
  "opts": {
    "recurse": true,
    "destination": "documentation"
  },
  "templates": {
    "cleverLinks": false,
    "monospaceLinks": false,
    "better-docs": {
      "name": "My React components"
    }
  }
}