Storybook does not compiles when using JSX syntax in VUE

I'm working on a simple assessment that requires me to use typescript and JSX syntax in VUE 2. I also need to integrate the storybook to test my UI components. I am able to run tests with the simple template syntax of VUE. But, if I use JSX syntax in VUE component and try to run the storybook I get the following error.

ERROR in ./src/components/Home.tsx 59:16
Module parse failed: Unexpected token (59:16)
File was processed with these loaders:
 * ./node_modules/@storybook/vue/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|     },
|     render() {
>         return (<div class={styles.container}>
|         {this.dropdownStatus && (<div class={styles.containerDropdown}>
|             <div class={styles.popupBtnWrap}>
 @ ./src/stories/Home.stories.js 102:0-38 105:13-17 123:12-16
 @ ./src sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (

what I understand till now is that this is an issue with babel-loader and I try to add a webpack.config.js file in the .storybook folder with the following configurations.

module.exports = {
  // ...
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.ts$/,
      loader: "ts-loader",
      options: { appendTsSuffixTo: [/\.vue$/] },
    });
    return config;
  },
};

but I think it does configure storybook with typescript in VUE but not for JSX syntax. I need the correct loader and webpack configuration for using the storybook in Vue with typescript and JSX. I have found the configuration and babel-loader for React JSX syntax in a GitHub forum but couldn't find a solution for Vue js.

Github forum that may be helpful https://github.com/storybookjs/storybook/issues/1493

Node version: v16.5.0

VUE CLI version: @vue/cli 4.5.13

Dev Dependencies

"devDependencies": {
    "@babel/core": "^7.14.6",
    "@storybook/addon-actions": "^6.3.4",
    "@storybook/addon-essentials": "^6.3.4",
    "@storybook/addon-links": "^6.3.4",
    "@storybook/vue": "^6.3.4",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "^4.5.13",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^1.2.2",
    "babel-loader": "^8.2.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "mocha": "^8.4.0",
    "mochapack": "^2.1.2",
    "typescript": "~4.1.5",
    "vue-loader": "^15.9.7",
    "vue-template-compiler": "^2.6.11",
    "typed-css-modules": "^0.3.7",
    "babel-core": "7.0.0-bridge.0"
  }