error route always getting 500 from trpc error? (next13/approuter)

      if (!userClerkProfile) {
        console.log("throwing"); // -> this is logging 
        throw new TRPCError({
          code: "NOT_FOUND",
          message: `Couldn't find the user with @${input.username}`,
        });

      if (!userClerkProfile) {
        console.log("throwing"); // -> this is logging 
        throw new TRPCError({
          code: "NOT_FOUND",
          message: `Couldn't find the user with @${input.username}`,
        });

const ErrorViewMap = {
  [TRPC_ERROR_MAP.NOT_FOUND]: UsernameNotFoundErrorView,
  DEFAULT: () => <p>Unexpected error, please try again</p>,
};

export default function ProfilePageError({
  error,
  reset,
}: PropsProfilePageError) {
  const errorCode = getHTTPStatusCodeFromError(error);
  const ErrorView = ErrorViewMap[errorCode] ?? ErrorViewMap.DEFAULT;

  return <ErrorView message={"stock message"} resetFn={reset} />;
}

const ErrorViewMap = {
  [TRPC_ERROR_MAP.NOT_FOUND]: UsernameNotFoundErrorView,
  DEFAULT: () => <p>Unexpected error, please try again</p>,
};

export default function ProfilePageError({
  error,
  reset,
}: PropsProfilePageError) {
  const errorCode = getHTTPStatusCodeFromError(error);
  const ErrorView = ErrorViewMap[errorCode] ?? ErrorViewMap.DEFAULT;

  return <ErrorView message={"stock message"} resetFn={reset} />;
}