How to get the Error page to render instead of page.js for client side errors in Nextjs?

For some reason I can not get the error.js page to render instead of the page.js whenever I throw an error on the client on some specific user interaction, for example a drop event.

"use client";
export default function DropFile() {
  const handleFileUpload = (event) => {
    if (event.type === "drop") {
      event.stopPropagation();
      event.preventDefault();
    }

    // File upload logic
    const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
    const file = files[0];

    if (!checkFileTypeValidity(file)) {
      throw new Error("Wrong File Type");
    }

  }
  
  return <div onDrop={handleFileUpload}> ...Some Jsx </div>
}

//error.js file
"use client";

export default function Error({ error, reset }) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div className="max-w-md">
      <h3 className="text-center">Wrong File Type</h3>
      <p>Please make sure that the file you uploaded is a .csv or .txt file</p>
    </div>
  );
}