I'm facing an issue with routing in my Next.js 14 application. I have a search page and a home page that share the same layout. When I navigate from the search page back to the home page by clicking on the logo, the URL updates correctly, but the Home page component does not render along with its child component CharactersList. Instead, it remains on the search page. The same happens when I navigate to a character detail page from search page. So the issue has to do with Search page. How can I fix it ?
Thank you in advance.

Here is my app folder structure:

src/
-- app/
 -- (characters)
    -- /favorites
    -- /search
    -- /styles
    layout.tsx
    page.tsx
 -- characters/[id]
    -- page.tsx
 error.tsx
 layout.tsx
 not-found.tsx

components/
context/
models/
services/
styles/
utils/

The Logo component:

'use client';
import Image from 'next/image';
import Link from 'next/link';

export const Logo = () => {
  return (
    <Link href='/'>
      <Image
        src='/assets/logo.svg'
        alt='Logo'
        width={130}
        height={52}
        priority={true}
      />
    </Link>
  );
};

The Home component

import { CharactersList } from '@/components/Characters';

const Home = () => {
  return <CharactersList />;
};

export default Home;

Attached are the remaining components screenshots with the code