Bun serves both html bundle with react and fetch api with Hono | Bun | Page 1

I want to serve both react app and hono APi with bun serve. I could render react app with /*: Indexinside Routes but if i try adding fetch: app.fetch for hono only the frontend works and the rest throws 404. I tried the following approaches

const server = serve({
  routes: {
    "/app/*": index,
  },

  fetch(req) {
    const url = new URL(req.url);

    if (url.pathname.startsWith("/api")) {
      return app.fetch(req);
    }

    // Redirect all non-API requests to the React app entry
    return Response.redirect("/app/");
  },

  development: process.env.NODE_ENV !== "production" && {
    hmr: true,
    console: true,
  },
});

where the client renders successfully and i could handle client routes with something like react router but the api routes respond with 400

same thing happens when i do

app.get("/", (c) => c.text("hello world"));

const server = serve({
  routes: {
    "/api/*": app.fetch,
    "/*": index,
  },

  development: process.env.NODE_ENV !== "production" && {
    hmr: true,
    console: true,
  },
});

#Bun serves both html bundle with react and fetch api with Hono