server action function is called the current page route

Question

I have a server action that is called on form submittion.

const addEmployee = async (e: FormData) => {
        "use server";
        const firstName = e.get("fNmae")?.toString();
        const lastName = e.get("lNmae")?.toString();
        const email = e.get("email")?.toString();
        const position = e.get("position")?.toString();
        const departmentId = e.get("department")?.toString();

        if (!firstName || !lastName || !email || !position || !departmentId) return;

        const newEmployee = {
            name: firstName + " " + lastName,
            email: email,
            position: position,
            departmentId: departmentId,
        };
        try {
            const response = await fetch("http://localhost:3000/employees/create", {
                method: "POST",
                body: JSON.stringify(newEmployee),
                headers: {
                    "Content-Type": "application/json",
                },
            });

            if (response.ok) {
                const data = await response.json();
                return data;
            } else {
                console.error("Failed to fetch employees data");
            }
        } catch (error) {
            console.error("Error while fetching employee data:", error);
        }
    };

The data should be posted to "http://localhost:3000/employees/create" but while checking the network tab, the function calls "http://localhost:3000/records" (here the component is in records page). why is it calling "http://localhost:3000/record" even if i have mentioned "http://localhost:3000/employees/create"

<form action={addEmployee}> 

here the modal UI,

In the above network, It isn't showing JSON.stringfy format which i passed above, Its showing in different format.