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 (
        <Box>
            <h1>{translateMessage('helloMessage', 'Hello')}</h1>
        </Box>
    );
};

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!