Connection timeout when trying to connect to Uploadthing

[SajawalHassan]

I am trying to set up upload thing however I am getting timeout errors.

app/api/uploadthing/core.ts

import { createUploadthing, type FileRouter } from "uploadthing/next";
import { auth } from "@clerk/nextjs";

const handleAuth = () => {
  const { userId } = auth();
  if (!userId) throw new Error("Unauthorized");
  return { userId };
};

const f = createUploadthing();

export type fileUploadEndpoints = "serverImage" | "messageFile";

export const ourFileRouter = {
  serverImage: f({ image: { maxFileSize: "4MB", maxFileCount: 1 } })
    .middleware(() => handleAuth())
    .onUploadComplete(() => {}),

  messageFile: f(["image", "pdf"])
    .middleware(() => handleAuth())
    .onUploadComplete(() => {}),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

app/api/uploadthing/route.ts

import { createNextRouteHandler } from "uploadthing/next";

import { ourFileRouter } from "./core";

// Export routes for Next App Router
export const { GET, POST } = createNextRouteHandler({
  router: ourFileRouter,
});

I have correctly pasted in my credentials in the .env file.
Here is the full error

[UT] UploadThing dev server is now running!
 ⨯ TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11600:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: ConnectTimeoutError: Connect Timeout Error
      at onConnectTimeout (/home/sajawal/Documents/web_development/discord_clone_nextjs/node_modules/next/dist/compiled/undici/index.js:1:92227)
      at /home/sajawal/Documents/web_development/discord_clone_nextjs/node_modules/next/dist/compiled/undici/index.js:1:91719
      at Immediate._onImmediate (/home/sajawal/Documents/web_development/discord_clone_nextjs/node_modules/next/dist/compiled/undici/index.js:1:92109)
      at process.processImmediate (node:internal/timers:478:21)
      at process.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'UND_ERR_CONNECT_TIMEOUT'
  }
}

This error is printed out in the console of my NextJS app. Here is the error in the browser:

Error: Something went wrong. Please report this to UploadThing.
    UploadThingError index.mjs:196
    fatalClientError chunk-WNRCOS53.mjs:104
    startUpload chunk-WNRCOS53.mjs:149
    current chunk-WNRCOS53.mjs:26
    onUploadClick index.mjs:245
    callCallback react-dom.development.js:19465
    
    ...

    NextJS 4
    <anonymous> index.js:6
    NextJS 4
    <anonymous> react-dom.development.js:27
    <anonymous> react-dom.development.js:36891
    NextJS 4
    <anonymous> index.js:37
    NextJS 4
    <anonymous> client.js:3
    NextJS 4
    <anonymous> app-index.js:14
    NextJS 4
    <anonymous> app-next-dev.js:9
    appBootstrap app-bootstrap.js:57
    loadScriptsInSequence app-bootstrap.js:23
    appBootstrap app-bootstrap.js:56
    <anonymous> app-next-dev.js:7
    NextJS 7
Caused by: TypeError: Response.text: Body has already been consumed.
    fromResponse index.mjs:218
    s3ConnectionRes client.mjs:119
    promise callback*DANGEROUS__uploadFiles client.mjs:117
    startUpload chunk-WNRCOS53.mjs:121
    current chunk-WNRCOS53.mjs:26
    onUploadClick index.mjs:245
    callCallback react-dom.development.js:19465
   ...

Kindly let me know if more details are needed