@pmmmwh/react-refresh-webpack-plugin/loader error when importing react component from submodule

Question

I have a parent repository developed with React, and I have a child Sub Module inside of it(which is developed by react too) and both of them are ceeted with CRA.

The project folder structure is something like below:

main-project    //(parent project)
  /.git
  /nodemodule
  /src
  /CKLibs/ck_commun //(child submodule)
     /.git
     /src
       /js
         /About.jsx 
     /...
  /...

I want to use the About.jsx component from submodule. I imported it like blow in my parent project:

import About from 'ck_commun/src/js/About' //short path configured

but it throws this error

ERROR in ./CKLibs/ck_commun/src/assets/shared/pages/About.jsx 5:12
Module parse failed: Unexpected token (5:12)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import React from 'react'
| const About = () => {
>     return (<>hello</>)
| };
| 

it looks like it can't transpile jsx code into js code my package.json contains this dependencies

  "dependencies": {
    "@reduxjs/toolkit": "^1.8.5",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
  },
```