JEST testing of custom 'navigation factory' React Component causes problems

Question

I am fresh to test. I have 'navigation factory' - function that renders certain navigation component based on where the function is fired. Here simplified code:

export const Factory = (props: RouteComponentProps) => {
    
    const path = props.match.path;

    switch (path) {
        case Paths.books:
            return (
                <nav className="books__buttons">
                    <LinkButton label="Wyszukiwanie" link={Paths.search} />
                    <Pagination />
                    <FiltersVisibilityToggler />
                </nav>
            );

        case Paths.individualBook:
            return (
                <nav className="books__buttons">
                    
                </nav>
            );

        default:
            return null;
    }
};

const NavigationFactory = withRouter(Factory);
export default NavigationFactory;

Path.books above is call of for value of path object which keeps all paths.

Here is my test file

import { screen, render, cleanup } from '../../../testing-library-utils';

import useDispatchAction from '../../../../../src/hooks/useDispatchAction';
import NavigationFactory from '../../../../../src/components/SearchResults/NavigationFactory';
import { Route, Router } from 'react-router-dom';
import Paths from '../../../../../src/Routing/Paths';

describe('Given NavigationFactory', () => {
    describe('when rendered', () => {
        it('displays correctly initial elements', () => {
            const { getByLabelText } = render(
                <Route path={Paths.books}>
                    <NavigationFactory />
                </Route>,
            );
            screen.debug();
            const label = getByLabelText('Wyszukiwanie');
            expect(label).toBeInTheDocument();
        });
    });
});

It must be told here that 'render' is produced by code like below:

import { render } from '@testing-library/react';
import AppProvider from '../../src/components/AppProvider';

const renderWithContext = (ui: any) => render(ui, { wrapper: AppProvider });

export * from '@testing-library/react';
export { renderWithContext as render };

where AppProvider is provider of 'everything what could be provided'including Router

const AppProvider: React.FC = ({ children }) => {
    return (
        <Provider store={store}>
            {' '}
            <FiltersVisibilityProvider>
                <Router basename={process.env.PUBLIC_URL}>{children}</Router>
            </FiltersVisibilityProvider>
        </Provider>
    );
};

I believed that when component is rendered within Router and within Route, everything should be fine, but it is not. Moreover, it is not about label this or not this and about the fact that screen.debug() returns none of those two components - just nothing. What is wrong here?