'Router' cannot be used as a JSX component. It was working fine until I added the component Msal componant in index.tsx and PageLayout in app.tsx

Question

App.tsx :

'Import statements`

export default function App() {
  const { loading, theme, themeString, teamsfx } = useTeamsFx();
  return (
    
    <TeamsFxContext.Provider value={{theme, themeString, teamsfx}}>
      <PageLayout>
          <AuthenticatedTemplate>
              <ProfileContent />
          </AuthenticatedTemplate>
          <UnauthenticatedTemplate>
              <p>You are not signed in! Please sign in.</p>
          </UnauthenticatedTemplate>
      </PageLayout>
      <Provider theme={theme || teamsTheme} styles={{ backgroundColor: "#eeeeee" }}>

        <Router>          `Error here`
          <Route exact path="/">   `Error here`
            <Redirect to="/tab" />
          </Route>
          {loading ? (
            <Loader style={{ margin: 100 }} />
          ) : (
            <>
              <Route exact path="/privacy" component={Privacy} />   `Error here`
              <Route exact path="/termsofuse" component={TermsOfUse} />    `Error here`
              <Route exact path="/tab" component={Tab} />   `Error here`
              <Route exact path="/config" component={TabConfig} />   `Error here`
              </>
          )}
          
        </Router>

      </Provider>
      </TeamsFxContext.Provider>
  );
}

Index.tsx :

'Import statements`

const msalInstance = new PublicClientApplication(msalConfig);

// ReactDOM.render(<App />,document.getElementById("root"));

ReactDOM.render(
    <React.StrictMode>
        <MsalProvider instance={msalInstance}>
            <App />
        </MsalProvider>
    </React.StrictMode>,
    document.getElementById("root")
);

Error message: (alias) class Redirect import Redirect 'Redirect' cannot be used as a JSX component. Its instance type 'Redirect' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("C:/Users/t-harshsh/source/vscode/Refer-Profile-Services/Teams-Referral-Services/node_modules/@types/react/index").ReactNode'.ts(2786)

Answer 1

Error arises due to the mismatching versions of react present in the main dependency and the one installed on installing the @azure/msal-react library, try downgrading react version to match the library's version.

run: npm install react@17.0.2 or the version mentioned in the package.json of the library.