How to generate a parent-child "tree" view of all component imports in a React app

Is there a way to generate a "tree" view of all components in a React application? For example, if I have the following simple application file structure:

src/
  - index.tsx
  - App.tsx
  - components/
    - ComponentOne.tsx
    - ComponentTwo.tsx

And my index.tsx file looks something like this:

import App from "./App";

ReactDOM.render(<App />, document.getElementById("app-root"));

And my App.tsx file looks something like this:

import ComponentOne from "./ComponentOne";
import ComponentTwo from "./ComponentTwo";

export default function App(){
  return (
    <ComponentOne />
    <ComponentTwo />
  );
}

Is there a way to generate a map of this structure in a JSON format, something like this?:

{
  "index.tsx": {
    "filepath": "...",
    "imports": {
      "App.tsx": {
        "filepath": "...",
        "imports": {
          "ComponentOne": { ... },
          "ComponentTwo": { ... }
        }
      }
    }
  }
}

I assume the compiler must create something similar to this format through the course of compiling the application (i.e. parsing import statements, determining child-parent relationships), and there's obviously various factors affecting how module paths are resolved, but being able to programatically generate even a simple representation (like the one shown in the Chrome React developer console) would be extremely helpful for my project.