This is my server.js file

const { createServer } = require('http');
const next = require("next");
const { Server } = require("socket.io");

const dev = process.env.NODE_ENV !== "production";
const hostname = "https://quiet-mooncake-8ff89f.netlify.app/";
const port = 3000;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev , hostname });
const handler = app.getRequestHandler();

app.prepare().then(() => {
  const httpServer = createServer(handler);

  const io = new Server(httpServer);
  /.../

});

This is my Component

"use client";

import { io } from "socket.io-client";

const socket = io();

I have deployed this project and whenever this Component renders it just shows loading and when i tried looking in the network tab in developers tool it shows a pattern of 2 API hitting again and again.
First is https://quiet-mooncake-8ff89f.netlify.app/socket.io/?EIO=4&transport=polling&t=OyShAVC
which has Parameters as ->

Request URL:
https://quiet-mooncake-8ff89f.netlify.app/socket.io/?EIO=4&transport=polling&t=OyShAVC
Request Method:GET

Status Code:308 Permanent Redirect

Remote Address:[2406:da18:b3d:e202::64]:443

Referrer Policy:strict-origin-when-cross-origin

and Response Parameters as ->

Age:0

Cache-Control:
no-cache

Cache-Status:
“Netlify Edge”; fwd=miss

Content-Type:
text/plain;charset=UTF-8

Date:
Fri, 26 Apr 2024 23:10:28 GMT

Location:
/socket.io?EIO=4&transport=polling&t=OyShAVC

Netlify-Vary:
header=x-nextjs-data,cookie=__prerender_bypass|__next_preview_data

Refresh:
0;url=/socket.io?EIO=4&transport=polling&t=OyShAVC

Server:
Netlify

Strict-Transport-Security:
max-age=31536000; includeSubDomains; preload

X-Content-Type-Options:
nosniff

X-Nf-Request-Id:
01HWEASA1Y24RXM1J3Z4W6W5MQ

And the other one is is just redirecting to 404 page not found
Please tell me what should i do..

I have tried chnaging the hardcoding the URL in my code but it is still nopt working