Previous routed component doesn't leave the DOM during react-router test - reactjs

Question

When I test the first case when a component is routed, and test another case, the previous case still appears in the test DOM.
After the test case : "renders properly" rendered a route to the Header component,
and the test case: "navigates to / on header title click" fails because the Header component is appearing more than once because the test DOM didn't clear the first case. I hope this image helps.
import * as React from 'react'
import {vi, describe, it, expect} from 'vitest'
import { fireEvent, waitFor} from '#testing-library/react'
import { Header } from "./Header"
import { renderWithRouter } from '../testHelpers'
vi.mock("./../CartWidget", ()=> ({
CartWidget: ()=> <div>Hello Widget</div>
}))
describe('Header Shared Component', ()=> {
it('renders properly', ()=> {
const {container} = renderWithRouter(()=><Header/>)
expect(container.innerHTML).toMatch('Goblin Store')
expect(container.innerHTML).toMatch('Hello Widget')
})
it('navigates to / on header title click', async()=> {
const {getByText, history} = renderWithRouter(() => <Header />);
fireEvent.click(getByText("Goblin Store"));
await waitFor (()=>expect(history.location.pathname).toEqual("/"))
})
})
// renderWithRouter
import * as React from 'react'
import * as ReactDom from 'react-router-dom';
import {createMemoryHistory, MemoryHistory} from 'history'
import {render, RenderResult} from '#testing-library/react'
const {Router} = ReactDom;
export const renderWithRouter: RenderWithRouter = (renderComponent, route)=>{
const history = createMemoryHistory()
if(route){
history.push(route)
}
return {
...render(
<Router history={history}>
{renderComponent()}
</Router>),
history
}
}
type RenderWithRouter = (
renderComponent: ()=> React.ReactNode,
route?: string
)=> RenderResult & { history: MemoryHistory }
export const Header = () => (
<header>
<div className="container">
<div className="nav-brand">
<Link to="/">Goblin Store</Link>
<p>Everything for your Typescript adventure</p>
</div>
...
</div>
</header>
);
I have read the react router official DOC with testing for react-router-dom v5, but it appears to be same on my end.
Here are my dependencies
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.3.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"vite": "^4.0.0",
"vitest": "^0.26.3"