vue2 to react migration, tsx module not found - reactjs

Question

I have a vue2 app which does not implement typescript. I have decided to migrate the app to react. Thought process is to implement new features in react and let the old features run in vue. This is what I have done so far.
Created a new react-migration folder which will have all the new features.
Tried two ways to use the HelloWorld component
Create a react wrapper which takes the react component and renders it.
<template>
<div ref="container" />
</template>
<script>
import { createElement } from "react";
import { createRoot } from "react-dom/client";
export default {
inheritAttrs: false,
props: {
component: {
type: Function,
required: true,
},
},
data() {
return {
reactRoot: null,
};
},
watch: {
$attrs: {
deep: true,
handler() {
this.updateReactComponent();
},
},
},
mounted() {
this.reactRoot = createRoot(this.$refs.container);
this.updateReactComponent();
},
destroyed() {
this.reactRoot.unmount();
},
methods: {
updateReactComponent() {
this.reactRoot.render(createElement(this.component, this.$attrs));
},
},
};
</script>
Used veaury package to do the same.
Issue :
I have added all the ext in the config file.
extensions: ['*', '.js', '.vue', '.json','.tsx','.ts','.jsx']
I believe its because my vue project is not able to recognise the react tsx file.
All the help is appreciated.
Implementation reference articles
Veary implementation reference
React to vue migrations reference
package.json dependencies
"dependencies": {
"#cypress/vue": "^2.2.4",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/vue-fontawesome": "^2.0.2",
"#tiptap/extension-character-count": "^2.0.0-beta.12",
"#tiptap/extension-collaboration": "^2.0.0-beta.19",
"#tiptap/extension-collaboration-cursor": "^2.0.0-beta.20",
"#tiptap/extension-font-family": "^2.0.0-beta.207",
"#tiptap/extension-highlight": "^2.0.0-beta.14",
"#tiptap/extension-link": "^2.0.0-beta.18",
"#tiptap/extension-table": "^2.0.0-beta.24",
"#tiptap/extension-table-cell": "^2.0.0-beta.13",
"#tiptap/extension-table-header": "^2.0.0-beta.15",
"#tiptap/extension-table-row": "^2.0.0-beta.13",
"#tiptap/extension-task-item": "^2.0.0-beta.16",
"#tiptap/extension-task-list": "^2.0.0-beta.16",
"#tiptap/extension-text-style": "^2.0.0-beta.207",
"#tiptap/extension-typography": "^2.0.0-beta.207",
"#tiptap/extension-underline": "^2.0.0-beta.207",
"#tiptap/html": "^2.0.0-beta.84",
"#tiptap/prosemirror-tables": "^1.1.4",
"#tiptap/starter-kit": "^2.0.0-beta.80",
"#tiptap/vue-2": "^2.0.0-beta.39",
"#vue/babel-preset-jsx": "^1.4.0",
"#vue/cli": "^4.5.15",
"axios": "^0.19.2",
"buefy": "^0.9.4",
"canvg": "^4.0.1",
"core-js": "^2.6.5",
"dompurify": "^2.4.3",
"echarts": "^4.4.0",
"eslint-plugin-cypress": "^2.12.1",
"google-fonts-webpack-plugin": "^0.4.4",
"hooper": "^0.3.4",
"html2pdf.js": "^0.10.1",
"jspdf": "^2.5.1",
"lodash": "^4.17.21",
"moment": "^2.24.0",
"npm-run-all": "^4.1.5",
"numeral": ">=2",
"postcss-loader": "^3.0.0",
"prosemirror-commands": "^1.5.0",
"prosemirror-history": "^1.3.0",
"prosemirror-keymap": "^1.2.0",
"prosemirror-schema-list": "^1.2.2",
"raw-loader": "^0.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.57.1",
"sass-rem": "^3.0.0",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.0",
"veaury": "^2.3.11",
"vee-validate": "^3.2.1",
"vue": "^2.6.10",
"vue-axios": "^2.1.5",
"vue-carousel": "^0.18.0",
"vue-class-component": "^7.1.0",
"vue-content-loading": "^1.6.0",
"vue-drawer-layout": "^1.3.0",
"vue-echarts": "^4.0.4",
"vue-html2pdf": "^1.8.0",
"vue-i18n": "^8.0.0",
"vue-jwt-decode": "^0.1.0",
"vue-line-clamp": "^1.3.2",
"vue-moment": "^4.0.0",
"vue-numerals": "^3.0.5",
"vue-router": "^3.1.3",
"vue-star-rating": "^1.6.1",
"vuedraggable": "^2.23.2",
"vuex": "^3.1.2",
"webpack-dev-server": "^4.7.4",
"y-indexeddb": "^9.0.6",
"y-websocket": "^1.3.15",
"yjs": "^13.5.10"
},
"devDependencies": {
"#iconify/icons-icomoon-free": "^1.2.3",
"#iconify/vue2": "^2.0.1",
"#kazupon/vue-i18n-loader": "^0.3.0",
"#types/uuid": "^9.0.0",
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-plugin-eslint": "^3.11.0",
"#vue/cli-service": "^3.11.0",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.3",
"cache-loader": "^4.1.0",
"css-loader": "^3.2.1",
"cypress": "^12.3.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^6.7.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.2.3",
"file-loader": "^3.0.1",
"prettier": "^1.19.1",
"sass-loader": "^7.1.0",
"url-loader": "^2.1.0",
"vue-cli-plugin-i18n": "^0.6.0",
"vue-eslint-parser": "^7.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
}