NextJs + Mongoose + Mongo Atlas multiple connections even with caching

I am using NextJS to build an app. I am using MongoDB via mongoosejs to connect to my database hosted in mongoAtlas.

My database connection file looks like below

    import mongoose from "mongoose";
    
    const MONGO_URI =
      process.env.NODE_ENV === "development"
        ? process.env.MONGO_URI_DEVELOPMENT
        : process.env.MONGO_URI_PRODUCTION;
    
    console.log(`Connecting to ${MONGO_URI}`);
    
    const database_connection = async () => {
      if (global.connection?.isConnected) {
        console.log("reusing database connection")
        return;
      }
    
      const database = await mongoose.connect(MONGO_URI, {
        authSource: "admin",
        useNewUrlParser: true
      });
    
      global.connection = { isConnected: database.connections[0].readyState }
      console.log("new database connection created")
      
    };
    
    export default database_connection;

I have seen this MongoDB developer community thread and this GitHub thread.

The problem seems to happen only in dev mode(when you run yarn run dev). In the production version hosted on Vercel there seems to be no issue. I understand that in dev mode the server is restarted every time a change is saved so to cache a connection you need to use as global variable. As you can see above, I have done exactly that. The server even logs: reusing database connection, then in mongoAtlas it shows like 10 more connections opened.

How can I solve this issue or what am I doing wrong?