Why is my proxy exposing the URL it's proxying

Question

I have a limited understanding of proxies, but from what I know they are supposed to improve security by hiding the URL of a service through an intermediary.

I have a NextJS server with an API route the acts as a proxy. Basically, it takes in requests of the outside world and returns responses from a server inside the local machine. I do not want to open the port of any service other than the frontend NextJS server. I am using the http-proxy-middleware NPM package to do this with the following code.

# /pages/api/[...slug.js]

import { createProxyMiddleware } from "http-proxy-middleware";

const proxy = createProxyMiddleware({
    target: process.env.SERVER_URL,
    secure: false,
    pathRewrite: { "^/api/": "" },
    changeOrigin: true,
});

export const config = {
    api: {
        externalResolver: true,
        bodyParser: false,
    },
}

export default function handler(req, res) {
    proxy(req, res, (err) => {
        if (err) {
            throw err;
        }

        throw new Error(
            `Request '${req.url}' is not proxied! We should never reach here!`
        );
    });
}

It should take all requests queried to the relative route /api and change the origin to localhost:8000. It serves as a gateway between my frontend and my backend. The problem is that when I send a request through /api, the route correctly redirects but the URL of backend is exposed. Looking in the Firefox developer console, I can see the URL of my backend. Does this not defeat the purpose of the proxy? How can I change this?