Better tree structure

I have this code:

class Category {
  constructor(
     readonly _title: string,
  ) { }

  get title() {
    return this._title
  }
}

const categories = {
  get pets() {
    const pets = new Category('Pets')

    return {
      get dishes() {
        const dishes = new Category('Dishes')

        return dishes
      }
    }
  },
  get cloth() {
    const cloth = new Category('Cloth')

    return {
      get accessories() {
        const accessories = new Category('Accessories')

        return accessories
      }
    }
  }
}

I want to use it like this

const product = new Product(categories.pets.dishes)

Its pretty good, but on frontend I should render this like tree:

<ul>
  {Object.entries(categories).map(
    ([slug, category]) => {
      return (
        <React.Fragment key={slug}>
          <li>{category.title}</li> // problem here
            <ul>
              {Object.entries(category).map(([s, c]) => {
                return <li key={s}>{c.title}</li>
              })}
            </ul>
         </React.Fragment>
       )
  })}
</ul>

How can I get the name of the parent category? What’s the best way to design this?