Error with using Graph Toolkit for SPFx

Question

I'm trying to use graph toolkit in my SPFx solution. I followed the steps at https://learn.microsoft.com/en-us/graph/toolkit/get-started/mgt-spfx

But when I tried gulp serve it was throwing errors as below:

Error - [webpack] 'dist':
./node_modules/lit-element/lit-element.js 6:194
Module parse failed: Unexpected token (6:194)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  * Copyright 2017 Google LLC
|  * SPDX-License-Identifier: BSD-3-Clause
>  */class s extends t{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=e(i,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return i}}s._$litElement$=!0,s[("finalized","finalized")]=!0,globalThis.litElementHydrateSupport?.({LitElement:s});const r=globalThis.litElementPolyfillSupport;r?.({LitElement:s});const o={_$AK:(t,e,i)=>{t._$AK(e,i)},_$AL:t=>t._$AL};(globalThis.litElementVersions??=[]).push("4.0.5");export{s as LitElement,o as _$LE};
| //# sourceMappingURL=lit-element.js.map
|
 @ ./node_modules/lit/index.js 3:0-43 3:0-43
 @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseTaskComponent.js
 @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js

Here is my package.lock.json

How can I fix the error? I followed step by step from MS documentation. Is there anything missing?