Cypress Component testing for React Microbundle (Rollup) custom dev server configuration

Question

I'm trying to setup a component testing strategy for a new react repo that we are working on here.

Based on Cypress documentation there are no useful details about how to configure component testing using a custom dev server like this.

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer(cypressConfig) {
      // return dev server instance or a promise that resolves to
      // a dev server instance here
    },
  },
})

My package.json looks like this one:

  "source": "src/index.ts",
  "exports": {
    "require": "./dist/index.cjs",
    "default": "./dist/index.modern.js"
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.module.js",
  "unpkg": "./dist/index.umd.js",
  "typings": "dist/index",
  "scripts": {
    "build": "microbundle",
    "dev": "microbundle watch",
    "pretty": "prettier --config .prettierrc 'src/**/*.(ts|tsx)' --write",
    "test": "jest",
    "ci:start-example": "cd example; npm start",
    "cy:open": "npx cypress open"
  },
  "dependencies": {
    "react-style-object-to-css": "^1.1.2"
  },
  "peerDependencies": {
    "react": "16 - 18",
    "react-dom": "16 - 18"
  },
  "devDependencies": {
    "@testing-library/cypress": "^8.0.3",
    "@types/jest": "^28.1.6",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@typescript-eslint/eslint-plugin": "^5.31.0",
    "@typescript-eslint/parser": "^5.31.0",
    "cypress": "^10.3.1",
    "eslint": "^8.20.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "jest": "^28.1.3",
    "microbundle": "^0.15.0",
    "prettier": "^2.7.1",
    "ts-jest": "^28.0.7",
    "typescript": "^4.7.4"
  },
  "files": [
    "dist"
  ]
}

Is there someone facing the same issue with custom dev servers? I'm not too familiar with microbundle and setting this up comparing with webpack or vite. Would appreciate any help please!