Module parse failed in npm module - reactjs

Question

I just started learning React and NextJS 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 message:
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.