Having trouble fetching data on sever components

Im having an issue trying to access the pathname on a server component, because I need to get the ID of the form that its on the pathname, and I want it to be a server component.
Sometimes the code works and sometimes doesn't. I'm debugging on my back end server and Im not receiving the ID when the code doesnt work.
This is my code on the server component:

import "./style.css";
import axios from "axios";
import FormSection from "./FormSection";
import { headers } from "next/headers";

const fetchForm = async (pathname) => {
  const id = pathname.split("/").pop();
  const res = await axios({
    method: "POST",
    url: `${process.env.NEXT_PUBLIC_FORM_ROUTES_INT_URL}/api`,
    data: {
      query: `...`,
      variables: {
        getFormId: id,
      },
    },
  });
  // Validation
  if (res.data.errors) {
    throw new Error(res.data.errors[0].message);
  }
  // Logic para redirecionar al id del form creado
  return res.data.data.getFormForSubmission;
};

export default async function CustomerFormPage() {
  const fullUrl = headers().get("referer") || "";
  const form = await fetchForm(fullUrl);
  return (
    <div className="h-100 row m-0" style={{ maxWidth: "100vw" }}>
      <div className="row mx-auto my-auto card-container col-sm-12 col-md-10 col-lg-10 col-xl-6">
        <div className="col-md-6 col-sm-12 p-5">
          <h3>{form.title}</h3>
          <p>{form.description}</p>
        </div>
        <div className="col-md-6 col-sm-12 p-5">
          <FormSection fields={form.inputs} />
        </div>
        <div className="poweredBy">
          <p>
            Powered by <a href="#">Form Lite</a>
          </p>
        </div>
      </div>
    </div>
  );
}

Sometimes we are sending the friendlyId to the server and sometimes not so Im having an error form not found.

Someone knows how to fix this?
Thanks

I fixed creating a middleware and storing the path on a cookie:

middleware.js:

import { NextResponse, NextRequest } from "next/server";
import { getToken } from 'next-auth/jwt';

export async function middleware(req) {
  const { pathname } = req.nextUrl;
  const token = await getToken({ req, secret: process.env.JWT_SECRET });

  if (!token && pathname != "/login" && !pathname != "/register" && !pathname.startsWith('/fms/')) {
    return NextResponse.redirect(new URL('/login', req.url))
  }

  if (req.nextUrl.pathname.startsWith('/fms/')) {
    const requestHeaders = new Headers(req.headers);
    requestHeaders.set('x-url', req.url);
    return NextResponse.next({
      request: {
        // Apply new request headers
        headers: requestHeaders,
      }
    });
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/forms/:path*", "/", "/help", "/settings/:path*", "/fms/:path*"],
};

And then to get the path on the server component:

import { headers } from "next/headers";
const headersList = headers();
const headerUrl = headersList.get("x-url") || "";

Hope I help someone with my answer.