cypress: webpack 5 custom react project throwing error Cypress could not detect tests in this file

Hi Team , I have test file in specified test folder:

Test code:

import React from "react";
import { mount } from "@cypress/react";
import App from "./App";

describe("App component", () => {
  it("works", () => {
    mount(<App />);
    // now use standard Cypress commands
    cy.contains("Hello World!").should("be.visible");
  });
});

done installation using cypress cli webpack config:

plugin / index.js:

const path = require("path");

const { startDevServer } = require("@cypress/webpack-dev-Server");

/**
 * @type {Cypress.PluginConfig}
 */
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  if (config.testingType === "component") {
    /** @type import("webpack").Configuration */
    const webpackConfig = {
      resolve: {
        extensions: [".js", ".ts", ".jsx", ".tsx"],
      },
      mode: "development",
      devtool: false,
      output: {
        publicPath: "/",
        chunkFilename: "[name].bundle.js",
      },
      // TODO: update with valid configuration for your components
      module: {
        rules: [
          {
            test: /\.(js|jsx|mjs|ts|tsx)$/,
            loader: "babel-loader",
            options: {
              cacheDirectory: path.resolve(__dirname, ".babel-cache"),
            },
          },
        ],
      },
    };
    on("dev-server:start", (options) =>
      startDevServer({
        options,
        webpackConfig,
      })
    );
  }
};

still getting following issue:

if i use create-react-app then setup works fine only i am facing issue with webpack configuration option . Kindly let me know any fix for same