This is my project structure:

 -Project:
    -public
    -src
       - ...
       -index.tsx
       -views
          -App.tsx
          -Layout.tsx
       -components
          - ...
       -common <- submodule from github
          -src
             - ...
             -views
                -HomeView.tsx
                -SubView.tsx
                -WildCardView.tsx
             -router
                -SwitchRouter.tsx

index.tsx: (from Project folder)

const root = ReactDOMClient.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>);

App.tsx (from src/views):

import React from 'react';
...
import { SwitchRouter } from '../common/src/router/SwitchRouter'; // <- prepared component from gitHub repository
// import { SwitchRouter } from '../src/router/SwitchRouter'; // this will be working without errors :/

export function App () {
  return (
    <div>
      {/* Another components */}
      <SwitchRouter />
    </div>
  );
}

And SwitchRouter.tsx from src/common/src/router/SwitchRouter.tsx (github subrepo)

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { WildCardView } from '../views/WildCardView'; // (subrepoview)
import { HomeView } from '../views/HomeView'; // (subrepoview)
import { SubView } from '../views/SubView'; // (subrepoview)
import { routes } from './routes'; // (subrepo values)

export function SwitchRouter () {
  const { home, sub, wildcards } = routes;
  return (
    <Routes>
      <Route path={home} element={<HomeView />} />
      <Route path={sub} element={<SubView />} />
      <Route path={wildcards} element={<WildCardView />} />
    </Routes>
  );
}

With this configuration I get the logs:

1. Uncaught TypeError: Cannot read properties of null (reading 'useContext') The question is this:
2. react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component
3. The above error occurred in the component:

When importing this SwitchRouter.tsx from subrepo, I get an error like the image below:

[error logs][1][1]: https://i.stack.imgur.com/umMTH.png

This error disappears when I move SwitchRouter.tsx to the 'src' folder in Project/src, which is kind of like the structure of the project itself. What is the reason for this? Is there any way around it? I would like all routing to be taken from SwitchRouter.tsx component in 'common' (i.e. subrepo)

For package.json in Project and Project/src/common/package.json

"dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4",
    "react-router-dom": "^6.2.2"
  },
...
"devDependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "@types/react-router-dom": "^5.3.3"
  }