Use correctly GetStaticProps in Next 404 page

Question

In a React project with next I have the following page called 404.tsx inside the pages folder:

import { Custom404 } from "@components/organisms/Custom404";
import { DefaultPageTemplate } from "@components/templates/DefaultPageTemplate";
import { setConfig } from "@redux/slices/config";
import { AppDispatch } from "@redux/store";
import axios from "axios";
import { GetStaticProps, InferGetStaticPropsType, NextPage } from "next";
import { useDispatch } from "react-redux";

export const getStaticProps: GetStaticProps = async () => {
  const env = process.env.ENVIRONMENT;
  const publicS3URL = `${process.env.S3_PUBLIC_BASEURL}/`;
  const branchesEndpoint = `${publicS3URL}config/dati_filiali.json`;
  const evaluationEndpoint = `${publicS3URL}config/variazione_algoritmo.json`;
  const streetPriceEndpoint = `${publicS3URL}config/variazione_streetprice.json`;
  const faqEndpoint = `${publicS3URL}config/faq.json`;
  const footerEndpoint = `${publicS3URL}config/footer.json`;
  const funnelEndpoint = `${publicS3URL}config/funnel.json`;
  const headerEndpoint = `${publicS3URL}config/header.json`;
  const navbarEndpoint = `${publicS3URL}config/main_navbar.json`;
  const pagesEndpoint = `${publicS3URL}config/pages.json`;
  const districtEndpoint = `${publicS3URL}config/province.json`;

  const { data: branchesData } = await axios.get(branchesEndpoint);
  const { data: evaluationConfig } = await axios.get(evaluationEndpoint);
  const { data: faqData } = await axios.get(faqEndpoint);
  const { data: streetPriceConfig } = await axios.get(streetPriceEndpoint);
  const { data: footerConfig } = await axios.get(footerEndpoint);
  const { data: funnelConfig } = await axios.get(funnelEndpoint);
  const { data: headerConfig } = await axios.get(headerEndpoint);
  const { data: navbarData } = await axios.get(navbarEndpoint);
  const { data: pagesConfig } = await axios.get(pagesEndpoint);
  const { data: districtConfig } = await axios.get(districtEndpoint);

  return {
    props: {
      branches: branchesData,
      evaluation: evaluationConfig,
      streetPrice: streetPriceConfig,
      faq: faqData,
      footer: footerConfig,
      funnel: funnelConfig,
      header: headerConfig,
      navbar: navbarData,
      pages: pagesConfig,
      province: districtConfig,
      publicS3URL,
      env,
    },
  };
};

export type NotFoundProps = InferGetStaticPropsType<typeof getStaticProps>;

const NotFoundPage: NextPage = (props: NotFoundProps) => {
  const {
    branches,
    evaluation,
    faq,
    footer,
    streetPrice,
    funnel,
    header,
    navbar,
    pages,
    province,
    publicS3URL,
    env,
  } = props;

  const dispatch = useDispatch<AppDispatch>();
  dispatch(
    setConfig({
      branches,
      streetPrice,
      evaluation,
      faq,
      footer,
      funnel,
      header,
      navbar,
      pages,
      province,
      publicS3URL,
      env,
    })
  );

  return (
    <DefaultPageTemplate title="404 - Not Found" meta={[]}>
      <Custom404 />
    </DefaultPageTemplate>
  );
};

export default NotFoundPage;

I need to retrieve data with the API calls to populate correctly the config that are then passed with the props so that the final DefaultPageTemplate can correctly retrieve the data to print in the header, footer etc. The data is populated through json files, that's why I need to retrieve them with axios calls. However, in my local, with 8.19.4 as npm and v16.20.2 as Node version, the same as dev environment, everything is working fine, i get the 404 template in every url that is not correct. In dev, the pipeline stop with the following error:

    Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:387:5)
    at URL.onParseError (node:internal/url:565:9)
    at new URL (node:internal/url:641:5)
    at dispatchHttpRequest (file:///app/node_modules/axios/lib/adapters/http.js:168:20)
    at new Promise (<anonymous>)
    at httpAdapter (file:///app/node_modules/axios/lib/adapters/http.js:104:10)
    at Axios.dispatchRequest (file:///app/node_modules/axios/lib/core/dispatchRequest.js:46:10)
    at Axios.request (file:///app/node_modules/axios/lib/core/Axios.js:133:33)
    at Axios.<computed> [as get] (file:///app/node_modules/axios/lib/core/Axios.js:159:17)
    at Function.wrap [as get] (file:///app/node_modules/axios/lib/helpers/bind.js:5:15)
info  - Generating static pages (3/3)
> Build error occurred
Error: Export encountered errors on following paths:
    /404
    at /app/node_modules/next/dist/export/index.js:409:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:79:20)
    at async /app/node_modules/next/dist/build/index.js:1345:21
    at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:79:20)
    at async /app/node_modules/next/dist/build/index.js:1205:17
    at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/app/node_modules/next/dist/build/index.js:66:29)

and I cannot really understand how to show the 404 page with the proper data retrieved to populate header and footer if not with getStaticProps, considering also that in local I cannot replicate the error.