JSX element type 'AppRouter' does not have any construct or call signatures

I'm building a React application where there will be one master package to manage and render all components coming in from individual modules. Here's the relevant sections:

===== Package A (Individual Module) =====

index.tsx

import AppRouter from "./Routes";export default AppRouter;

Routes.tsx

import React from 'react';import {Route, Routes} from 'react-router-dom';import {MockModel} from './components/MockModel/MockModel';import {SecondMock} from "./components/MockModel/SecondMock";function AppRouter() {    return (<Routes><Route path="mock-one" element={<MockModel />} /><Route path="mock-two" element={<SecondMock />} /></Routes>    );}export default AppRouter;

===== Master Package =====

index.tsx

ReactDOM.render(<React.StrictMode><AppInitWrapper><React.Suspense fallback={<Loader size="large" />}><MockRoutes /></React.Suspense></AppInitWrapper></React.StrictMode>,  document.getElementById('root'));

MockRoutes.tsx

import AppRouter from "@myorg/package-a";function MockRouter() {    console.log("Inside Mock Routes");    return (<BrowserRouter><Routes><Route path="/mock-model" element={<AppRouter />} /></Routes></BrowserRouter>    );}export default MockRouter;

====

When I compile the Master Package, I get the error from MockRoutes.tsx: JSX element type 'AppRouter' does not have any construct or call signatures. What is causing this and how can I solve it?