Viewing JSON as a drop down tree using ReactJS

Question

I am trying to display the below JSON as a drop down tree. This is passing as a prop to the Tree.js. I need to display the json as a drop down tree with all of its properties and values.

---

---

I used react-json-tree npm package to create it. Now it displays like this.

Now I want to align the properties and values properly and remove the words like "{} 3 Keys,{} 10 keys,..". Below is the code for this.

import React from "react";
import ReactDOM from "react-dom";
import { JSONTree } from 'react-json-tree';

function Tree({datasource}) {
  const json = {datasource}
  console.log(datasource);
  const theme = {
    base00: '#272822',
    base01: '#383830',
    base02: '#49483e',
    base03: '#75715e',
    base04: '#a59f85',
    alignItems:'Right',
    nestedNodeLabel: ({ style }, keyPath, nodeType, expanded) => ({
        style: {
            textTransform: expanded ? 'uppercase' : style.textTransform,
            fontSize:'12px'
        },
      }),
    nestedKeyLabel: {
        fontSize:'12px',
    },
    value: {
        fontSize:'12px'
    }
  };
  return (
    <div className="App">
      <JSONTree hideRoot={true} data={json}  theme={theme} invertTheme={true}/>
    </div>
  );
}
export default Tree;

I would be appreciated if anyone could help me to fix this please suggest me any other npm packages or methods suitable for this.