Bellow is some code for some search functionality in my application. When I run this in dev mode everything works great, but when I run it in production a new search triggers a full page reload.

Since I am just updating the query param it is my understanding that the url should change without the reload.

  const hasAnyFilter = useMemo(() => {
    return search || location || jobTitle || rating || tags.length > 0;
  }, [search, location, jobTitle, rating, tags]);

  const handleArrayValue = useCallback(
    (key: string, value: string[] | null) => {
      const query = { ...router.query };
      if (value && value.length > 0) {
        query[key] = value;
      } else {
        delete query[key];
      }
      return query;
    },
    [router.query]
  );

  const shouldBeArray = useMemo(() => ["tags"], []);

  const handleUpdateRouterQuery = useCallback(
    (key: Filters, value: string | number | null | string[]) => {
      let newQuery = { ...router.query };
      if (shouldBeArray.includes(key)) {
        newQuery = handleArrayValue(key, value as string[]);
      } else if (value) {
        newQuery[key] = value.toString();
      } else {
        delete newQuery[key];
      }

      router.push(
        {
          query: newQuery,
        },
        undefined,
        {
          shallow: true,
        }
      );
    },
    [router, handleArrayValue, shouldBeArray]
  );