My company is using NextJS version 14.1.4.
I wish to create a custom error page, that triggers when accessing, for example, localhost:3000/fsdjfsdfnsdkfnsas, would show a 404.
I am following these documents: https://nextjs.org/docs/app/building-your-application/routing/error-handling
I have created a file inside src/app/error.tsx
It contains an exact copy of the code on the documentation page (See below)
When I visit localhost:3000/fsdjfsdfnsdkfnsas, I would expect to see "Something went wrong!" in the browser.
Instead, I see the default error page, with the message "This page could not be found" as if I had not created a custom error page, or as if the documentation is incorrect.

Please tell me, how do you create a custom error page in NextJS v14?
Thank you.

'use client' // Error components must be Client Components
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}