I am submitting a form that adds book data to MongoDB. Using Thunder Client, I see the backend is working and the data is added to the database. When I submit my form in the frontend, using createBrowserRouter and an action(), I get a 404.
The form data is being captured, and as far as I can see, absolutely everything is in place. The data should be stored. I have tried for 2 days now and cannot get over this hump. I am hoping someone would look at the code and easily see where the issue is.

// App.jsx
// All necessary imports here
const router = createBrowserRouter([
  {
    element: <UILayout />,
    errorElement: <Error />,
    children: [
      {
        path: "/",
        index: true,
        element: <Home />,
      },
      {
        path: "add-story",
        element: <AddStory />,
        action: addStoryAction,
      },
    ],
  },
]);

// server.js
import storyRouter from "./routes/storyRouter.js";
app.use("/api/v1/stories/add-story", storyRouter);

// storyRouter.js
router.post("/add-story", addStory);

// AddStory.jsx
import { Form } from "react-router-dom";
import customFetch from "../../utils/customFetch";


export const action = async ({ request }) => {
  const formData = await request.formData();
  const data = Object.fromEntries(formData);
  try {
    await customFetch.post("/stories/add-story", data);
    return null;
  } catch (error) {
    console.log(error);
    return error;
  }
};


const AddStory = () => {
  const [title, setTitle] = useState("");
  return (
    <div className="add-story-container">
      <div className="story-container">
        <Form method="post" className="add-story-form">
          <div className="page-title">Add Story</div>
          <div className="form-center">
          <div className="form-row">
              <label htmlFor="title" className="form-label">
                Title
              </label>
              <input
                className="form-input"
                type="text"
                name="title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
              />
         </div>
         <button type="submit" className="submit-btn">
           submit
         </button>
        </Form>
      </div>
    </div>
  );
};

// customFetch.js
import axios from "axios";
const customFetch = axios.create({
  baseURL: "/api/v1",
});
export default customFetch;

On the Home page I click on the “Add Story” button and I am taken to the form page at

Sorry for adding so much code in a question, but without any help, I just can’t move forward.