Custom button bar in React-admin v4.0 - react-admin

Question

I am trying to customize the user management page using <Admin> and <Resource> and am using React-Admin v.4.0. I need to add a bar with tabs below displayed resources (4 categories of users).
Whenever a tab is selected - "Not found" error is displayed error when selecting required tab) Although the name in the sidebar changes to the selected value and after the sidebar is clicked the whole dashboard is re-rendered to display the requested category of users, like here: page after the sidebar is clicked
I am trying to figure out if this is a React render related issue or something is missing in my react-admin part of the code. Without the custom bar and with a default appBar the page is working correctly.
My code looks like this:
import {UserList} from 'components/UserList';
const MyLayout_1 = ({ children }) => {
return (
<Layout appBar={ () => <></>} >
{children}
<h2>{heading}</h2>
<MyTabBar />
</Layout>
);
};
return (
<Admin dataProvider={dataProvider} layout={MyLayout_1}>
{selectedTab === 'users' && (
<Resource name="users" list={UserList} />
)}
{selectedTab === 'approved' && (
<Resource name="approved" list={UserList} />
)}
{selectedTab === 'pending' && (
<Resource name="pending" list={UserList} />
)}
{selectedTab === 'declined' && (
<Resource name="declined" list={UserList} />
)}
</Admin>
);
I tried to add customRoutes to with Resources required for each route, but no success.

Answer 1

This is not the way you should customize the side menu in React Admin. The Resources the user has access to should always be available as children of <Admin>.
Rather, you should follow the Using a Custom Menu doc to customize the way your side menu looks, and add the tab logic in there.