Wordpress Plugin Endpoint returning 404 - php

Question

I'm trying to create a react widget for WordPress using static data and rest api (for practice).
The problem: I have registered an endpoint, but can't get it to access the data at the registered endpoint. I keep getting a 404 error.
Here's the link that gets me to my worpress dashboard: http://penguin.linux.test/wordpressLocal/wp-admin and here's the full code:
<?php
/*
Plugin Name: WP Dashboard Widget
*/
function enqueue_react_scripts() {
wp_enqueue_script( 'react', 'https://unpkg.com/react#17/umd/react.development.js', array(), '17', true );
wp_enqueue_script( 'react-dom', 'https://unpkg.com/react-dom#17/umd/react-dom.development.js', array(), '17', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_react_scripts' );
function react_app_container() {
echo '<div id="react-app-container"></div>';
}
// Callback function to get the data for the chart
function get_chart_data() {
$data = array(
array(
'name' => 'Jan',
'uv' => 4000,
'pv' => 2400,
),
array(
'name' => 'Feb',
'uv' => 3000,
'pv' => 1398,
),
array(
'name' => 'Mar',
'uv' => 2000,
'pv' => 9800,
),
array(
'name' => 'Apr',
'uv' => 2780,
'pv' => 3908,
),
array(
'name' => 'May',
'uv' => 1890,
'pv' => 4800,
),
);
return rest_ensure_response( $data );
}
// Register a custom endpoint
add_action( 'rest_api_init', function () {
register_rest_route( 'getsdata/v1', '/chart_data/', array(
'methods' => 'GET',
'callback' => 'get_chart_data',
) );
} );
function react_dashboard_widget_script() {
?>
<script type= "text/javascript" >
const React = window.React;
const ReactDOM = window.ReactDOM;
const GraphWidget =()=>{
const [ChartData, setChartData]=React.useState([]);
console.log("pepper")
React.useEffect(() => {
fetch('http://penguin.linux.test/wordpressLocal/wp-json/getsdata/v1/chart_data')
.then(response => response.json())
.then(data => setChartData(data))
.catch(error => console.error(error));
},[]);
return (
<LineChart width={500} height={300} data={ChartData.length > 0 ? ChartData : ChartData}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>
);
};
ReactDOM.render(
<GraphWidget />,
document.getElementById('react-app-container')
);
</script>
<?php
}
add_action('admin_footer','react_dashboard_widget_script');
function register_react_dashboard_widget() {
wp_add_dashboard_widget( 'react_dashboard_widget', 'React Dashboard Widget', 'react_app_container' );
}
add_action( 'wp_dashboard_setup', 'register_react_dashboard_widget' );
I have tried moving the callback function block and changing the namespace. I expected the api link http://penguin.linux.test/wordpressLocal/wp-json/getsdata/v1/chart_data to fetch the data from the callback function, but I'm getting a 404 error.