Material UI import leading to “You may need an appropriate loader to handle this file type.”

Getting the following compilation error on just adding an import statement for material UI button component.

Failed to compile.

./node_modules/@lit/reactive-element/decorators/query-async.js 10:56
Module parse failed: Unexpected token (10:56)
You may need an appropriate loader to handle this file type.
|   return (n, e) => t(n, e, {
|     async get() {
>       return await this.updateComplete, this.renderRoot?.querySelector(r) ?? null;
|     }
|   });

here is my import statement

import '@material/web/button/filled-button.js';

without that import , it works perfectly..

I am using "@material/web": "^1.4.1", dependency.

I am stuck in this.. How can i proceed here?

PS: i am new to react, apologies if i have done silly mistakes!