Error: Can't walk dependency graph: Cannot find module - When running Cypress with Typescript and Page Objects

Question

While creating a new command file where I also tried to work it with the Page Object model and tried to import page object file into the command file and then tried to run it - the Cypress has an error of -

Error: Can't walk dependency graph: Cannot find module 'cypress/components/saucedemo-PO/login_saucedemo_PO' from 'D:\Cypress Workspace\Cypress-Automation-Framework\cypress\support\commands'
    required by D:\Cypress Workspace\Cypress-Automation-Framework\cypress\support\commands\loginSaucedemo.ts
    at D:\Cypress Workspace\Cypress-Automation-Framework\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17
    at process (D:\Cypress Workspace\Cypress-Automation-Framework\node_modules\browser-resolve\node_modules\resolve\lib\async.js:173:43)
    at ondir (D:\Cypress Workspace\Cypress-Automation-Framework\node_modules\browser-resolve\node_modules\resolve\lib\async.js:188:17)
    at load (D:\Cypress Workspace\Cypress-Automation-Framework\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
    at onex (D:\Cypress Workspace\Cypress-Automation-Framework\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
    at D:\Cypress Workspace\Cypress-Automation-Framework\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47
    at callback (C:\Users\Techment Technology\AppData\Local\Cypress\Cache\12.9.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\polyfills.js:299:20)
    at callback (C:\Users\Techment Technology\AppData\Local\Cypress\Cache\12.9.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\polyfills.js:299:20)
    at FSReqCallback.oncomplete (node:fs:207:21)

The command file is D:\Cypress Workspace\Cypress-Automation-Framework\cypress\support\command\loginSaucedemo.ts

import login_saucedemo_PO from "cypress/components/saucedemo-PO/login_saucedemo_PO";

declare global {
    namespace Cypress {
        interface Chainable {
            /**
             * Custom command to login into Sauce demo portal
             * @param username: string
             * @param password: string
             * @example cy.loginSaucedemo(userData.users.user1.username, userData.users.user1.password)
             */
            loginSaucedemo(username: string, password: string): Chainable<Element>;
        }
    }
}

export const loginSaucedemo = (username: string, password: string) => {
    login_saucedemo_PO.typeUsername(username)
    login_saucedemo_PO.typePassword(password)
    login_saucedemo_PO.clickLoginButton()
};

I have imported this Cypress Commands from e2e.js file

import { loginSaucedemo } from "./commands/loginSaucedemo.ts";

Cypress.Commands.add('loginSaucedemo', loginSaucedemo);

And the config file for cypress is - cypress.config.js

const { defineConfig } = require('cypress')
// promisified fs module
const fs = require('fs-extra');
const path = require('path');
const cucumber = require('cypress-cucumber-preprocessor').default;
const browserify = require('@cypress/browserify-preprocessor');

function getConfigurationByFile(file) {
  const pathToConfigFile = path.resolve('cypress\\config', `${file}.json`);

  if (!fs.existsSync(pathToConfigFile)) {
    console.log("No custom config file found");
    return {};
  }

  return fs.readJson(pathToConfigFile)
}

module.exports = defineConfig({
  chromeWebSecurity: false,
  defaultCommandTimeout: 10000,
  pageLoadTimeout: 30000,
  viewportWidth: 1920,
  viewportHeight: 1080,
  video: false,
  videoUploadOnPasses: false,

  retries: {
    runMode: 1,
    openMode: 1,
  },

  env: {
    webdriveruni_homepage: "http://www.webdriveruniversity.com",
    first_name: "EnvFIrst",
  },

  projectId: "123456",
  reporter: "cypress-multi-reporters",

  reporterOptions: {
    configFile: "reporter-config.json",
  },

  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      const options = {
        ...browserify.defaultOptions,
        typescript: require.resolve('typescript'),
      };

      on('file:preprocessor', cucumber(options))
      const file = config.env.configFile || ''

      return getConfigurationByFile(file)
    },
    baseUrl: "http://www.webdriveruniversity.com",
    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx,feature,features}",
    chromeWebSecurity: false,
    screenshotOnRunFailure: true,
  },

  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
    },
  },
});