I am trying to add custom component for an action in adminJS. I only have the basic setup of the project. I am new to adminJS, so any help is appreciated. Thanks.

Below is my code. I only have server.js file and a custom component.

server.js file

process.env.ADMIN_JS_SKIP_BUNDLE = 'false';
process.env.NODE_ENV = 'production';  // Set this based on your environment


import express from 'express';
import AdminJS from 'adminjs';
import AdminJSExpress from '@adminjs/express';
import { Sequelize } from 'sequelize';
import { Database, Resource } from '@adminjs/sequelize';
import { bundle } from '@adminjs/bundler';
import path from 'path';
import { fileURLToPath } from 'url'; // Corrected import for fileURLToPath
import { dirname } from 'path';
import { ComponentLoader } from 'adminjs'

// Convert file URL to path for ES Module compatibility
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const app = express();
const port = 3000;
const sequelize = new Sequelize('sqlite::memory:', { logging: false });

// Define models
const User = sequelize.define('user', {
    email: Sequelize.STRING,
    password: Sequelize.STRING,
});

// Synchronize all models
await sequelize.sync();



// Setup component bundling
const componentsBundlePath = path.join(__dirname, 'public', 'admin-components', 'components.bundle.js');

console.log("Directory:", __dirname);
console.log("Component Path:", path.join(__dirname, 'components', 'CustomEdit.jsx'));
console.log("Bundle Path:", componentsBundlePath);
const componentLoader = new ComponentLoader();
componentLoader.add('CustomEdit', path.join(__dirname, 'components', 'CustomEdit.jsx'));
await bundle({
    destinationDir: 'public/admin-components', // Relative path may not be ideal here
    componentLoader
});

AdminJS.registerAdapter({ Database, Resource });
const admin = new AdminJS({
    databases: [sequelize],
    rootPath: '/admin',
    /*assets: {
        scripts: ['/admin-components/components.bundle.js'],
    },*/
    componentLoader,
    resources: [{
        resource: User,
        options: {
            actions: {
                edit: {
                  //component: EDITCOMPONENT,
                  component: componentLoader.getComponents('CustomEdit'),
                },
            },
        },
    }],
});

const router = AdminJSExpress.buildRouter(admin);

app.use(admin.options.rootPath, router);
app.use(express.static(path.join(__dirname, 'public')));

app.listen(port, () => console.log(`Server started at http://localhost:${port}${admin.options.rootPath}`));

Basic CustomEdit.jsx file

import React from "react"
import { Box, H3 } from "@adminjs/design-system"

const CustomEdit = props => {
  const { record } = props

  return (
    <Box flex>
      <Box
        variant="white"
        width={1 / 2}
        boxShadow="card"
        mr="xxl"
        flexShrink={0}
      >
        <H3>Example of a simple page</H3>
        <p>Where you can put almost everything</p>
        <p>like this:</p>
        <p>
          <img
            src="https://i.redd.it/rd39yuiy9ns21.jpg"
            alt="stupid cat"
            width={300}
          />
        </p>
      </Box>
      <Box>
        <p>Or (more likely), operate on a returned record:</p>
        <Box overflowX="auto">{JSON.stringify(record)}</Box>
      </Box>
    </Box>
  )
}

export default CustomEdit

package.json

{
  "name": "my-adminjs-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@adminjs/bundler": "^3.0.0",
    "@adminjs/express": "^6.1.0",
    "@adminjs/sequelize": "^4.1.1",
    "adminjs": "^7.8.1",
    "express": "^4.19.2",
    "sequelize": "^6.37.3",
    "sqlite3": "^5.1.7"
  }
}

I have looked on several similar issues and tried the workaround but not able to resolve the issue.

When I run the server, the bundling is completed, and it successfully creates components in public/admin-components folder.