AdminJS not overriding default dashboard with custom React component

So, I just started with adminjs and have been trying to override the default dashboard with my own custom component. I read the documentation and I don't think I am doing anything wrong? yet it still wont load the component. I started with a basic component to see whether it works or not.
It's being initialized but its not overriding the default dashboard.
AdminJS initialized with dashboard: { component: 'Dashboard' }



Code is provided below
Dashboard.jsx:
import React from 'react';
import { Box } from '@adminjs/design-system';
import { useTranslation } from 'adminjs';

const Dashboard = () => {
const { translateMessage } = useTranslation();
console.log('dashboard component loading...')
return (



{translateMessage('helloMessage', 'Hello')}



);
};

export default Dashboard;




admin.js:
import AdminJS from 'adminjs';
import { Database, Resource } from '@adminjs/sequelize';
import Customers from './src/models/Customers.js';
import Product from './src/models/Product.js';
import People from './src/models/People.js';
import Companies from './src/models/Companies.js';
import Leads from './src/models/Leads.js';
import Offers from './src/models/Offers.js';
import { ComponentLoader } from 'adminjs';

const componentLoader = new ComponentLoader();

const Components = {
Dashboard: componentLoader.add('Dashboard', './src/components/Dashboard.jsx')
};

AdminJS.registerAdapter({ Database, Resource });

const adminOptions = {
dashboard: {
component: Components.Dashboard
},
componentLoader,
resources: [{
resource: Customers,
options: {
parent: null,
properties: {
id: {
isVisible: { list: false, edit: false, show: false },
},
type: {
position: 1,
availableValues: [
{ value: 'company', label: 'Company' },
{ value: 'person', label: 'Person' },
],
},
name: {
position: 2,
},
email: {
position: 3,
},
phone: {
position: 4,
},
country: {
position: 5,
},
},
},
},
{
resource: People,
options: {
parent: null,
},
},
{
resource: Companies,
options: {
parent: null,
},
},
{
resource: Leads,
options: {
parent: null,
properties: {
type: {
availableValues: [
{ value: 'company', label: 'Company' },
{ value: 'person', label: 'Person' },
],
},
},
},
},
{
resource: Offers,
options: {
parent: null,
},
},
{
resource: Product,
options: {
parent: null,
},
},
],
rootPath: '/admin',
};

export default adminOptions;



server.js:
import AdminJS from 'adminjs'
import AdminJSExpress from '@adminjs/express'
import express from 'express'
import dotenv from 'dotenv'
import sequelize from './src/config/db.js';
import { Database, Resource } from '@adminjs/sequelize';
import adminOptions from './admin.js';

dotenv.config();

const PORT = 3000;

const start = async () => {
const app = express()
AdminJS.registerAdapter({ Database, Resource });
const admin = new AdminJS(adminOptions);
console.log('AdminJS initialized with dashboard:', admin.options.dashboard);

const adminRouter = AdminJSExpress.buildRouter(admin)
app.use(admin.options.rootPath, adminRouter)

app.listen(PORT, async () => {
console.log(`AdminJS started on
http://localhost:${PORT}${admin.options.rootPath}`) />
try {
await sequelize.authenticate();
console.log("database connected successfully")

await sequelize.sync();
console.log("database models synchronized")
}
catch (err) {
console.log("error connecting to database", err)
}
})
}

start()



I tried logging any information regarding it but it seems like it's not loading the component at all?
Any help or suggestions would be appreciated. Thanks!