liferay-amd-loader - Missing react dependency error in Liferay react application

Question

I am new to Liferay application but able to load the basic data using react portlet in liferay. I started facing the below error when I am trying to show apexcharts/react-apexcharts in react portlet in liferay.

Sample code is here:

import React from 'react';
import ReactDOM from 'react-dom';
import Chart from 'react-apexcharts';

class Board extends React.Component {
    constructor() {
        super();
    }

    render() {
        const title = "Servers";

        return (
            <div>
                <div className='status'>{title}</div>
                <div className='board-row'>
                    <p>React Server configuration page</p>
                </div>
            </div>
        );
    }
}

export function xChart(props){
    let state = {
        options: {},
        series: [44, 55, 41, 17, 15],
        labels: ['A', 'B', 'C', 'D', 'E']
      }
    
     return(
        <>
            <Chart options={state.options} series={state.series} type="donut" width="380" />
        </>
     ) 
}

class Dashboard extends React.Component {
    render() {
        return (
            <div className='game'>
                <div className='game-board'>
                    <Board />
                </div>
                <div>
                    <xChart></xChart>
                </div>
            </div>
        );
    }
}

export default function(elementId) {
    ReactDOM.render(<Dashboard />, document.getElementById(elementId));
}

Note: I have even tried with class chart extends React.Component instead of Chart function but still same issue.

Below are the dependencies present in pom.xml

    "dependencies": {
        "apexcharts": "^3.45.2",
        "react": "16.8.6",
        "react-apexcharts": "^1.4.1",
        "react-dom": "16.8.6"
    }