Next.js Dynamic API Page returning "local..../undefined/api/......". Unable to reach desired API

I am calling a function through 2 layers of React components with a unique item ID. The function "statusHandler" sends a fetch call to my "api/orders/ + ID". I am using the Next.js setup and pages to call the API routes.

I am receiving the error:

Failed to load resource: the server responded with a status of 404 undefined/api/orders/62f9df251286e27e0c7888df:1(Not Found)

Why is there undefined in the API call and what is the correct way to pass a function through 2 component layers with a variable without executing it?

AdminPage with Handler function

const AdminStatus = (props) => {
  const [ordersList, setOrdersList] = useState(props.orders);

  const statusHandler = async (id) => {
    console.log("STATUS HANDLER");
    const { URL } = process.env;
    const selectedOrder = ordersList.filter((order) => order._id === id)[0];
    const currentStatus = selectedOrder.count;

    try {
      const res = await fetch(URL + "/api/orders/" + id, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ statuscount: currentStatus + 1 }),
      });

      setOrdersList([
        res.data,
        ...ordersList.filter((order) => order._id !== id),
      ]);
    } catch (err) {
      console.log(err);
  
    }
  };

First Layer Component Receiving props and function

const OrderList = (props) => {
  const orders = props.orders;

  return (
    <div>
      <h1 className={styles.heading}> Orders</h1>
      <hr />
      <table className={styles.orders}>
        <thead>
          <tr>
            <th>Order No</th>
            <th>Pizza</th>
            <th>Time Since Order</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {orders.map((order, index) => (
            <SingleOrder
              key={order._id}
              _id={order._id}
              pizza={order.pizza}
              time={order.createdAt}
              status={order.orderstatus}
              onStatusHandler={props.onStatusHandler}
            />
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default OrderList;

2nd Layer Component Button calling function Note: IS this the correct way to call functions through 2 components so it is only executed onClick and does this propagate up through the layers...(() => {props.func(ID})

     <button
            type="submit"
            className={styles.changeStatus}
            onClick={() => props.onStatusHandler(props._id)}
          >
            Change status
          </button>

API page:

const handler = async (req, res) => {
  await dbConnect();

  if (req.method === "PUT") {
    try {
      console.log("IN THE PUT API");
      const order = await Order.findByIdAndUpdate(id, req.body, { new: true });
      res.status(200).json(JSON.stringify(order));
    } catch (err) {
      res.status(500).json(err);
      console.log(err);
    }
  }
};