Logo isn't loading on nested routes

I am using react-router-dom version 6.11.1. In my header component the logo is a image tag the included image which is in my public folder. In my single route component i can see the logo but when it goes 1 step down route like nested route i can't the see the logo its not loading anymore.
In my case it is in reset_password route.
I tested with routes as well its is the same. Can anyone help me with this

index.js file

const router = createBrowserRouter(
	createRoutesFromElements(
		<Route path='/' element={<App />}>
			<Route index={true} path='/' element={<Homepage />} />
			<Route path='/login' element={<Login />} />
			<Route path='/signup' element={<Signup />} />
			<Route path='/verification' element={<VerifyUser />} />
			<Route path='/forgot-password' element={<ForgotPassword />} />
			<Route path='/dashboard' element={<Dashboard />} />
			<Route path='/reset_password/:id' element={<ResetPassword />} />
		</Route>
	)
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
	<React.StrictMode>
		<Provider store={store}>
			<RouterProvider router={router} />
		</Provider>
	</React.StrictMode>
);

and header componenet

<header>
			<nav className='navbar navbar-expand-lg'>
				<div className='container'>
					<Link to='/' className='navbar-brand'>
						<img
							className='logo'
							loading='lazy'
							src='./images/jk_logo_horizontal.png'
							alt='logo'
						/>
					</Link>
					<div>
						<ul className='navbar-nav ms-auto mb-2 mb-lg-0'>
							<li className='nav-item'>
								<Link to='/login' className='nav-link active' aria-current='page'>
									<button className='btn btn-login'>Login</button>
								</Link>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</header>

What if you remove the first dot from your logo path?
It would look like this:

src='/images/jk_logo_horizontal.png'

This way, you have an absolute path to the logo, regardless if it is a nested route or not.