custom 404 page in next 13 with dynamic routing

Question

im using next13(with app dir) and trying to build a custom 404 page but i have dynamic routing that prevents the 404 page from showing up

and here is my code for home page

export default async function Home() {
  const data = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.API_KEY}`, {next: {revalidate:120}})
    .then((res) => res.json())
    .then((data) => data);



  return (
        <>
          <div className="grid gap-1 grid-cols-fluid">
          {data.results.map((v)=>{
            return(
              <Movie
              key={v.id}
              id={v.id}
              title={v.title}
              posterPath={v.poster_path}
              releaseDate={v.release_date}
              popularity={v.popularity}
              />
            )
          })}
          </div>
        </>
    )
}

and the code for 404 page:

function undefined() {
  return (
    <>
      <div className="flex justify-center items-center w-full h-full">
        <h1 className="text-5xl">404 Undefined</h1>
      </div>
    </>
  )
}

export default 404