diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4ac70212..b2966dca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - refactor(errors): improve pathFilter error message
 - fix(logger-plugin): fix missing target port
 - ci(package): npm package provenance
+- fix(logger-plugin): log target port when router option is used
 
 ## [v3.0.0](https://github.com/chimurai/http-proxy-middleware/releases/tag/v3.0.0)
 
diff --git a/src/plugins/default/logger-plugin.ts b/src/plugins/default/logger-plugin.ts
index 5e368030..4c302bba 100644
--- a/src/plugins/default/logger-plugin.ts
+++ b/src/plugins/default/logger-plugin.ts
@@ -43,8 +43,18 @@ export const loggerPlugin: Plugin = (proxyServer, options) => {
     const originalUrl = req.originalUrl ?? `${req.baseUrl || ''}${req.url}`;
 
     // construct targetUrl
-    const target = new URL(options.target as URL);
-    target.pathname = proxyRes.req.path;
+    // const port = proxyRes.req?.socket?.autoSelectFamilyAttemptedAddresses?.[0]?.split(':')?.reverse()[0]; //.at(-1),
+    const port = Object.keys(proxyRes.req?.agent?.sockets || {})?.[0]?.split(':')[1];
+
+    const obj = {
+      protocol: proxyRes.req.protocol,
+      host: proxyRes.req.host,
+      port: port,
+      pathname: proxyRes.req.path,
+    } as URL;
+
+    const target = new URL(`${obj.protocol}//${obj.host}${obj.pathname}`);
+    target.port = obj.port; // optional port
     const targetUrl = target.toString();
 
     const exchange = `[HPM] ${req.method} ${originalUrl} -> ${targetUrl} [${proxyRes.statusCode}]`;
diff --git a/test/e2e/http-proxy-middleware.spec.ts b/test/e2e/http-proxy-middleware.spec.ts
index 96f2cd80..c08890a7 100644
--- a/test/e2e/http-proxy-middleware.spec.ts
+++ b/test/e2e/http-proxy-middleware.spec.ts
@@ -4,6 +4,7 @@ import { Mockttp, getLocal, CompletedRequest } from 'mockttp';
 import type * as http from 'http';
 import type * as express from 'express';
 import * as bodyParser from 'body-parser';
+import type { Logger } from '../../src/types';
 
 describe('E2E http-proxy-middleware', () => {
   describe('http-proxy-middleware creation', () => {
@@ -433,15 +434,18 @@ describe('E2E http-proxy-middleware', () => {
 
     describe('option.logger', () => {
       let logMessages: string[];
+      let customLogger: Logger;
 
       beforeEach(() => {
         logMessages = [];
-        const customLogger = {
+        customLogger = {
           info: (message: string) => logMessages.push(message),
           warn: (message: string) => logMessages.push(message),
           error: (message: string) => logMessages.push(message),
         };
+      });
 
+      it('should have logged messages', async () => {
         agent = request(
           createApp(
             createProxyMiddleware({
@@ -451,9 +455,28 @@ describe('E2E http-proxy-middleware', () => {
             }),
           ),
         );
+
+        await mockTargetServer.forGet('/api/foo/bar').thenReply(200);
+        await agent.get(`/api/foo/bar`).expect(200);
+
+        expect(logMessages).not.toBeUndefined();
+        expect(logMessages.length).toBe(1);
+        expect(logMessages.at(0)).toBe(
+          `[HPM] GET /api/foo/bar -> http://localhost:${mockTargetServer.port}/api/foo/bar [200]`,
+        );
       });
 
-      it('should have logged messages', async () => {
+      it('should have logged messages when router used', async () => {
+        agent = request(
+          createApp(
+            createProxyMiddleware({
+              router: () => `http://localhost:${mockTargetServer.port}`,
+              pathFilter: '/api',
+              logger: customLogger,
+            }),
+          ),
+        );
+
         await mockTargetServer.forGet('/api/foo/bar').thenReply(200);
         await agent.get(`/api/foo/bar`).expect(200);