I have downloaded & imported all jvectormap js libraries in at index.html. But no map is being displayed. However, there is no error related to the map. Did I import the js files in the correct way? This is my first reactjs project so I'm unfamiliar with reactjs.
index.html
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="Themesdesign" name="author" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link href="assets/js/jvectormap/jquery-jvectormap.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="assets/libs/@fullcalendar/core/main.min.css" type="text/css">
<link rel="stylesheet" href="assets/libs/@fullcalendar/daygrid/main.min.css" type="text/css">
<link rel="stylesheet" href="assets/libs/@fullcalendar/bootstrap/main.min.css" type="text/css">
<link rel="stylesheet" href="assets/libs/@fullcalendar/timegrid/main.min.css" type="text/css">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="assets/js/jvectormap/jquery-jvectormap-2.0.5.min.js" type="text/javascript"></script>
<script src="assets/js/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<script src="assets/js/jvectormap/jquery-jvectormap.js" type="text/javascript"></script>
<script src="assets/js/jvectormap/map.js" type="text/javascript"></script>
</body>
</html>
Index.jsx
import React, { useEffect } from "react";
import ApexChart from "../apexcharttt";
import { Helmet, HelmetProvider } from "react-helmet-async";
import worldMapConfig from "../jvectormap";
import $ from 'jquery';
export default function Index() {
return (
<div className="col-xl-4">
<div className="card">
<div className="card-body">
<h4 className="header-title mb-4">Sales by State</h4>
<div id="world-map-markers" style={{ height: "230px" }}></div>
