jsx file not working

Hi,
I'm followed you to create react app with webpack but i getting "couldnt find the module:error" when i use jsx file. working fine with js file. Please guide me where im going wrong.. webpack and package.json is same as yours with additional packages.

Package.json:
{
"name": "my-application",
"version": "1.0.0",
"description": "Application ",
"private": true,
"keywords": [
"react",
"materialui",
"redux"
],
"author": "test",
"homepage": ".",
"license": "ISC",
"dependencies": {
"@date-io/core": "^1.3.6",
"@date-io/date-fns": "^1.0.1",
"@date-io/moment": "^1.3.13",
"@material-ui/core": "^4.9.10",
"@material-ui/icons": "^4.9.1",
"@material-ui/pickers": "^3.2.10",
"@material-ui/styles": "^4.9.10",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"body-parser": "^1.18.3",
"bootstrap": "^4.1.3",
"clsx": "^1.1.0",
"css-loader": "^3.5.3",
"date-fns": "^2.13.0",
"history": "^4.10.1",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"query-string": "^6.12.1",
"react": "^16.13.1",
"react-beautiful-dnd": "13.0.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^16.13.1",
"react-loading-skeleton": "^2.0.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"react-textarea-autosize": "7.1.2",
"redux": "^4.0.5",
"redux-devtools-extension": "2.13.8",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"single-spa": "^4.3.7",
"single-spa-react": "^2.14.0",
"style-loader": "^1.2.0",
"styled-components": "5.1.0",
"url-loader": "^4.1.0",
"webpack": "^4.17.2",
"cors": "^2.8.4"
},
"scripts": {
"start-react": "react-scripts start",
"build-react": "react-scripts build",
"test": "echo \"Error: no test specified\" && exit 1",

},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@date-io/core": "^1.3.6",
"@date-io/date-fns": "^1.0.1",
"@date-io/moment": "^1.3.13",
"@material-ui/pickers": "^3.2.10",
"date-fns": "^2.13.0",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.2.0",
"moment": "^2.25.3",
"path": "^0.12.7",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.7",
"clean-webpack-plugin": "0.1.19",
"copy-webpack-plugin": "^4.5.2",
"@babel/core": "^7.0.0",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.2",
"concurrently": "^4.0.1",
"cross-env": "^5.2.0",
"jest": "^23.6.0",
"style-loader": "^0.23.0"
}
}

Start with the package.json shown in the issue and compare the project's webpack configuration, especially the JSX and Babel-related setup. Reproduce the module error with a JSX entry point and determine which configuration or dependency is missing; done means the same application builds with JSX as it does with JS.

Written by the indexing model from the issue text.