Module parse failed in npm module

so I just started learning React and Next Js and I ran into this problem when trying to install a npm package. "Module parse failed: Unexpected token (52:6) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file". The package I tried installing was React Baraja-JS, https://www.npmjs.com/package/react-baraja-js.

error msg

error - ./node_modules/react-baraja-js/src/react-baraja.js
Module parse failed: Unexpected token (52:6)
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
|   render() {
|     return (
>       <ul id={this.props.id} className="baraja-container" ref="wrapper">
|         {this.props.children.map((Child, index) => {
|           return <li key={index}>{Child}</li>;

cardMenuNav.js

import React from 'react';
import BarajaJS from 'react-baraja-js'; // or '../dist/react-baraja-js';

const cards = [
  {
    imageSrc: 'path/to/image1.png',
    title: 'card 1',
    details: 'this is card 1'
  },
  {
    imageSrc: 'path/to/image2.png',
    title: 'card 2',
    details: 'this is card 2'
  },
  {
    imageSrc: 'path/to/image3.png',
    title: 'card 3',
    details: 'this is card 3'
  },
  {
    imageSrc: 'path/to/image4.png',
    title: 'card 4',
    details: 'this is card 4'
  },

  // add more cards ...
]

export default class Demo extends React.Component {
  constructor() {
    super();

    this.state = {
      fan: {}
    };
  }

  // Fan right
  fanEvent() {
    this.setState({
      fan: {
        direction: 'right',
        easing: 'ease-out',
        origin: {
          x: 25,
          y: 100
        },
        speed: 500,
        range: 90,
        center: true
      }
    });
  }

  render() {
    return (
      <React.Fragment>
        <button id="fan-button" onClick={() => this.fanEvent()}>Fan right</button>
      </React.Fragment>
    );
  }
};

index.js

import Image from 'next/image'
import CardMenuNav from '../components/cardMenuNav';
const Home = () => {
  return ( 
    <div>
      <CardMenuNav />
    </div>
  );
}
 
export default Home;

package.json

{
  "name": "Alcohol-Business-Website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "antd": "^4.22.8",
    "bootstrap": "^5.2.0",
    "next": "12.2.5",
    "react": "18.2.0",
    "react-baraja-js": "^1.0.7",
    "react-bootstrap": "^2.5.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.23.0",
    "eslint-config-next": "12.2.5"
  }
}

These are the codes that I am working with. I'm not too sure what is wrong but I did some research and it said that I had a duplicate package or something is wrong with my webpack. Please bless me with your knowledge. Thanks