I am trying to make a code that will allow users to filter the data between dates (e.g. 2023-05 to 2023-07).
When I run it in react, it will result in a 404 error.
My project requires that I only use .jsx files.

Directory is the picture attached.

barChart.jsx:
import React, { useState, useEffect } from 'react';
import { Bar } from 'react-chartjs-2';
import Papa from 'papaparse';

function BarChart() {
const [allData, setAllData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [selectedStartWeek, setSelectedStartWeek] = useState('');
const [selectedEndWeek, setSelectedEndWeek] = useState('');

// Load data from CSV file
useEffect(() => {
Papa.parse('public/data/NumberofCOVID19infectionsbyEpiweek.csv', {
download: true,
header: true,
complete: (result) => {
setAllData(result.data);
setFilteredData(result.data); // Initially display all data
}
});
}, []);

// Update the chart when the selected weeks change
useEffect(() => {
const startIndex = allData.findIndex(item => item.epi_week === selectedStartWeek);
const endIndex = allData.findIndex(item => item.epi_week === selectedEndWeek);
setFilteredData(allData.slice(startIndex, endIndex + 1));
}, [selectedStartWeek, selectedEndWeek, allData]);

// Options for Chart.js
const options = {
scales: {
y: {
beginAtZero: true
}
}
};

// Data for Chart.js
const data = {
labels: filteredData.map(item => item.epi_week),
datasets: [{
label: 'COVID-19 Infections',
data: filteredData.map(item => item.est_count),
backgroundColor: 'rgba(0, 123, 255, 0.5)',
borderColor: 'rgba(0, 123, 255, 1)',
borderWidth: 1,
}]
};

return (
<div>
<div>
<label>Start Week: </label>
<select value={selectedStartWeek} onChange={(e) => setSelectedStartWeek(e.target.value)}>
{allData.map(item => <option key={item.epi_week} value={item.epi_week}>{item.epi_week}</option>)}
</select>

<label>End Week: </label>
<select value={selectedEndWeek} onChange={(e) => setSelectedEndWeek(e.target.value)}>
{allData.map(item => <option key={item.epi_week} value={item.epi_week}>{item.epi_week}</option>)}
</select>
</div>
<Bar data={data} options={options} />
</div>
);
}

export default BarChart;

index.js:
import React from 'react';
import dynamic from 'next/dynamic';

// Since we want to dynamically import the BarChart component to ensure it's client-side rendered
const BarChartWithNoSSR = dynamic(() => import('../components/BarChart'), {
ssr: false, // Disable server-side rendering for this component
});

const Home = () => {
return (
<div>
<h1>Covid-19 Infections in Singapore by Epi-Week</h1>
<BarChartWithNoSSR />
</div>
);
};

export default Home;