Utilising use() for overriding response

[everythinginjs]

Hey guys,
I have an HTTP handler like the below in my handler.ts

export const handlers = [http.get("/products/:id", ({ params }) => {
    const { id } = params;

    const product = products.find(
      (product) => product.id === parseInt(id.toString())
    );

    if (!product) {
      return new HttpResponse(null, { status: 404 });
    }

    return HttpResponse.json(product);
  })]

as you can see I have implemented not found in the handler but in my test, I still have to handle product not found scenarios as well.

it("should render product not found message", async () => {
  const PRODUCT_NOT_FOUND_ID = 4;
  server.use(http.get("/products/:id", () => HttpResponse.json(null))); // <- here I mean
  render(<ProductDetail productId={PRODUCT_NOT_FOUND_ID} />);
  const message = await screen.findByText(/not found/i);

  expect(message).toBeInTheDocument();
});

I can not figure this out I might be wrong would be appreciated if to help me out why I need to do that twice.