react-router v6 throws hooks error on a previously working app

I know that this question has been asked before but I have a hard time determining what is the correct path for me here.

I am trying to add a router to an already working application.

I am new to react-router v6 and haven’t be using react for a while.

After adding react router to the index page I get this message:

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
 1. You might have mismatching versions of React and the renderer (such as React DOM)
 2. You might be breaking the Rules of Hooks
 3. You might have more than one copy of React in the same app

As the code was working fine before I tend to think that the addition of react router is the issue.

It does not seem like the existing code has anything to do with reason 2, which leaves 1 and 3, but an npm ls react showed that the only version all dependencies points to is react 18.2.0

❯ npm ls react
@comp/[email protected] /user/PROJECTS/service/webapp/client
├─┬ @emotion/[email protected]
│ ├─┬ @emotion/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @emotion/[email protected]
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @testing-library/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Now I guess my introduction of react-router is indeed the issue but I can’t figure out what went wrong.

Here is the code

index.js

import React from "react";
import {createRoot} from 'react-dom/client';
import {
    createBrowserRouter,
    RouterProvider,
  } from "react-router-dom";
import "./index.css";
import ServiceUI from "./app/components/ui/ServiceUI";

const router = createBrowserRouter([
    {
      path: "/",
      element: <ServiceUI/>,
    },
]);

const domNode = document.getElementById('serviceUI');
const root = createRoot(domNode);
root.render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
);

ServiceUI.jsx

import React from 'react';
import PropTypes from "prop-types";
import AppBar from "../header/AppBar";
import AppTabContainer from "../tabs/AppTabContainer";

const ServiceUI = () => {
    return <div>
        <AppBar/>
        <AppTabContainer/>
    </div>;
};

ServiceUI.propTypes = {
    apiBaseUrl: PropTypes.string,
};

ServiceUI.defaultProps = {
    apiBaseUrl: "",
};

export default ServiceUI;

AppTabContainer.jsx

import React, {useEffect, useState} from 'react';
import AppTabs from './AppTabs';
import ElementTable from "../element/ElementTable";
import {Chip} from '@mui/material';
import apiService from "../../services/apiService";
import TextTable from "../text/TextTable";

const AppTabContainer = () => {
    const [selectedTab, setSelectedTab] = useState(0);
    const [appVersion, setAppVersion] = useState(null);

    const handleTabChange = (event, newValue) => {
        setSelectedTab(newValue);
    };

    const getSelectedView = (tabIndex) => {
        if (tabIndex === 1) {
            return <TextTable/>;
        }

        return <ElementTable/>;
    };

    useEffect(() => {
        apiService.fetchAppVersion().then(json => {
            setAppVersion(json);
        }).catch(e => {
            setAppVersion(null);
        });
    }, []);


    return (
        <div>
            <div style={{margin: '20px'}}>
                {appVersion ? <Chip label={"Version: " + appVersion.version}/> : <div/>}
            </div>
            <AppTabs selectedTab={selectedTab} handleTabChange={handleTabChange}/>
            <div style={{display: 'flex', flexFlow: 'row nowrap'}}>
                <div style={{flex: '555 1 220px'}}>
                    {getSelectedView(selectedTab)}
                </div>
            </div>
        </div>
    );
};

export default AppTabContainer;

AppBar.jsx

import React, {useEffect, useState} from 'react';
import {Box, AppBar, Toolbar, Typography, Button} from '@mui/material';
import apiService from "../../services/apiService";

const Bar = () => {

    const [userData, setUserData] = useState(null);

    useEffect(() => {
        apiService.fetchUserInfo().then(json => {
            setUserData(json);
        }).catch(e => {
            setUserData(null);
        });
    }, []);

    return (
        <Box sx={{flexGrow: 1}}>
            <AppBar position="static" sx={{bgcolor: "#004572"}}>
                <Toolbar>
                    <Typography variant="h6" component="div" sx={{flexGrow: 1}}>
                        Service
                    </Typography>
                    <Button color="inherit">{userData ? userData.nameWithoutRoleId : "Login"}</Button>
                </Toolbar>
            </AppBar>
        </Box>
    );
};

export default Bar;

Obviously I am missing something, just don’t know what.