Async vanilla JS web component. Cannot use this in connectedCallback

Question

I'm trying to get access to this.menuData which is supposed to be populated with the async call to my endpoint. I've tried in multiple ways but it's always undefined. Can you help me find a way to make this work?

class NavigationMenu extends HTMLElement {
  constructor() {
    super();

    this.menuData = '';

    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          display: flex;
          flex-direction: row;
          gap: 1rem;
        }
      </style>

      <nav id="NavigationMain"></nav>
    `;
  }

  async fetchMenuEndpoint(url) {
    this.loading = true;
    try {
      const response = await fetch(url);
      const json = response.json();

      this.menuData = json;
    } catch (error) {
      NavigationMenu.throwError(error);
    }
    this.loading = false;
  }

  async connectedCallback() {
    await this.fetchMenuEndpoint('/?view=navigation');
    NavigationMenu.render();
  }

  static render = () => {
    console.log(this.menuData);
  };
}
customElements.define('navigation-menu', NavigationMenu);