react-testing-library don't go to another page after click on link tag

I'm trying to test if clicking on a link redirects me to another page, by expecting after the click to find an h1 tag from the another page(Register.jsx). But it's not working, what I'm doing wrong and how can I test to find where I'm doing wrong?

*Footer.jsx*

...
             <div>
                  <Link to="/register" className="btn-secondary" id="register">
                    Register
                  </Link>
            </div>
...

*Footer.test.jsx*

/* eslint-disable no-dupe-keys */
/* eslint-disable no-undef */

import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Footer from './Footer';

describe('Footer', () => {
  test('Render Footer Component', () => {
    render(
      <MemoryRouter>
        <Footer />
      </MemoryRouter>,
    );

    const link = screen.getByRole('link', { name: /register/i });
    userEvent.click(link);

    expect(
      screen.getByRole('heading', {
        name: /i am register page/i,
      }),
    ).toBeInTheDocument();
  });
});

*Error I'm getting*

TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name `/i am register page/i`

Here are the accessible roles:

      contentinfo:(And it shows me roles of the Footer.jsx page, not the Register.jsx page)