How can i get this navigation display template HTML and CSS to work

I am trying to recreate this react content query navigation display template

Using data from this list

Co-pilot returned this HTML and CSS script:

/* === Grid & container === */ .NavGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

/* === Group column === */
.NavGroup { border: 1px solid #d9e2ec; border-radius: 6px; overflow: hidden; background: #fff; }

/* Header bar (blue) */
.NavGroupHeader {
  margin: 0;
  background: #134f8c; /* dark blue */
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 10px 12px;
}

/* Items list */
.NavItems { list-style: none; margin: 0; padding: 0; }
.NavItem { border-top: 1px solid #e6edf5; }

/* Link row */
.NavLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: #0b5cab;
  padding: 10px 12px;
}
.NavLink:hover, .NavLink:focus { background: #f7f9fc; text-decoration: none; outline: none; }

/* Chevron on the right */
.NavChevron { color: #7a8ca9; font-weight: 700; }

/* Optional: collapse empty groups (if any) */
.NavGroup:has(.NavItems:empty) { display: none; }

{{!-- Group by header and sort items by Title --}} {{#groupBy items by="GroupHeader" sortBy="Title"}} {{groupName}}

    <ul class="NavItems" role="list">
      {{#each items}}
        <li class="NavItem" role="listitem">
          {{!-- Choose your URL field:
                - If your list has a Hyperlink column named "Link" or "URL", map it in RCQ and use Link.rawValue / URL.rawValue
                - If you are querying via search, use Path
          --}}
          {{#if Link.rawValue}}
            {{Link.rawValue}}
              <span>{{Title}}</span>
              <span class="NavChevron" aria-hidden="true">›</span>
            </a>
          {{else if URL.rawValue}}
            {{URL.rawValue}}
              <span>{{Title}}</span>
              <span class="NavChevron" aria-hidden="true">›</span>
            </a>
          {{else}}
            {{Path}}
              <span>{{Title}}</span>
              <span class="NavChevron" aria-hidden="true">›</span>
            </a>
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </section>
{{/groupBy}}

Loading navigation…

And this this handlebarsGroupby javascript:

/* SiteAssets/handlebarsGroupBy.js */

/* Make sure the external scripts namespace exists */ this.ReactContentQuery = this.ReactContentQuery || {}; ReactContentQuery.ExternalScripts = ReactContentQuery.ExternalScripts || {};

/**

• Registers {{#groupBy}} helper in RCQ's Handlebars context.
• Usage:
• {{#groupBy items by="GroupHeader" sortBy="Title"}}

• {{!-- block context: { groupName, items } --}}
  

• {{/groupBy}} */ ReactContentQuery.ExternalScripts.handlebarsGroupBy = { onPreRender: function (wpContext, handlebars) {

handlebars.registerHelper('groupBy', function (array, options) {
  const by = options.hash?.by;
  const sortBy = options.hash?.sortBy;
  if (!Array.isArray(array) || !by) return options.inverse?.(this);

  // Build { header -> [items...] }
  const groups = array.reduce((acc, item) => {
    const key = (item[by]?.textValue ?? item[by]?.rawValue ?? '').toString().trim();
    if (!key) return acc;
    (acc[key] ||= []).push(item);
    return acc;
  }, {});

  // Sort headers (GroupHeader)
  const keys = Object.keys(groups).sort((a, b) =>
    a.localeCompare(b, undefined, { sensitivity: 'base' })
  );

  // Sort items within each header by Title
  const html = keys.map(k => {
    const list = groups[k];
    const sorted = sortBy
      ? list.slice().sort((x, y) =>
          ((x[sortBy]?.textValue ?? x[sortBy]?.rawValue ?? '') + '')
            .localeCompare(((y[sortBy]?.textValue ?? y[sortBy]?.rawValue ?? '') + ''), undefined, { sensitivity: 'base' }))
      : list;

    return options.fn({ groupName: k, items: sorted });
  }).join('');

  return new handlebars.SafeString(html);
});

} };

However Sharepoint keep throwing up a error.

Please Help!!