Heroku app fails to connect to mongodb atlas server (after migration from mlab)

Question

I recently migrated from mlab to mongodb atlas due to its deprecation. I managed to successfully get a connection to the db and tested it with the mongoDB compass but when I add the environment variable to heroku it gives me the following error message:

MongoNetworkError: failed to connect to server [cluster-grwbxfbx-shard-00-02.e6jtl.mongodb.net:27017] on first connect [MongoNetworkError: connection 4 to cluster-grwbxfbx-shard-00-02.e6jtl.mongodb.net:27017 closed
2020-11-11T23:53:44.726144+00:00 app[web.1]: at TLSSocket.<anonymous> (/app/node_modules/mongodb/lib/core/connection/connection.js:372:9)
2020-11-11T23:53:44.726144+00:00 app[web.1]: at Object.onceWrapper (events.js:421:26)
2020-11-11T23:53:44.726145+00:00 app[web.1]: at TLSSocket.emit (events.js:314:20)
2020-11-11T23:53:44.726145+00:00 app[web.1]: at net.js:676:12
2020-11-11T23:53:44.726146+00:00 app[web.1]: at TCP.done (_tls_wrap.js:568:7)]
2020-11-11T23:53:44.726147+00:00 app[web.1]: at Pool.<anonymous> (/app/node_modules/mongodb/lib/core/topologies/server.js:438:11)
2020-11-11T23:53:44.726147+00:00 app[web.1]: at Pool.emit (events.js:314:20)
2020-11-11T23:53:44.726148+00:00 app[web.1]: at /app/node_modules/mongodb/lib/core/connection/pool.js:562:14
2020-11-11T23:53:44.726149+00:00 app[web.1]: at /app/node_modules/mongodb/lib/core/connection/pool.js:1009:9
2020-11-11T23:53:44.726149+00:00 app[web.1]: at callback (/app/node_modules/mongodb/lib/core/connection/connect.js:97:5)
2020-11-11T23:53:44.726150+00:00 app[web.1]: at /app/node_modules/mongodb/lib/core/connection/connect.js:124:7
2020-11-11T23:53:44.726150+00:00 app[web.1]: at _callback (/app/node_modules/mongodb/lib/core/connection/connect.js:349:5)
2020-11-11T23:53:44.726151+00:00 app[web.1]: at Connection.errorHandler (/app/node_modules/mongodb/lib/core/connection/connect.js:365:5)
2020-11-11T23:53:44.726151+00:00 app[web.1]: at Object.onceWrapper (events.js:421:26)
2020-11-11T23:53:44.726151+00:00 app[web.1]: at Connection.emit (events.js:314:20)
2020-11-11T23:53:44.726152+00:00 app[web.1]: at TLSSocket.<anonymous> (/app/node_modules/mongodb/lib/core/connection/connection.js:370:12)
2020-11-11T23:53:44.726152+00:00 app[web.1]: at Object.onceWrapper (events.js:421:26)
2020-11-11T23:53:44.726153+00:00 app[web.1]: at TLSSocket.emit (events.js:314:20)
2020-11-11T23:53:44.726153+00:00 app[web.1]: at net.js:676:12
2020-11-11T23:53:44.726153+00:00 app[web.1]: at TCP.done (_tls_wrap.js:568:7)
2020-11-11T23:53:44.812696+00:00 heroku[web.1]: Process exited with status 0
2020-11-11T23:53:44.850554+00:00 heroku[web.1]: State changed from starting to crashed
2020-11-11T23:53:44.854049+00:00 heroku[web.1]: State changed from crashed to starting
2020-11-11T23:53:47.149749+00:00 heroku[web.1]: Starting process with command `npm start`
2020-11-11T23:53:49.907225+00:00 app[web.1]: 

It seems as if heroku is adding a port to the end of the MONGODB_URI. Does anyone know whats going on? my config var in heroku is:

MONGODB_URI = mongodb+srv://username:[email protected]/test?retryWrites=true&w=majority

with username and password being replaced by my admin username and password.

Also here is my code for connecting to the db

import mongoose from 'mongoose'
import options from '../config'

export const connect = (url = options.dbUrl, opts = {}) => {
  return mongoose.connect(url, { ...opts, useNewUrlParser: true })
}

export const config = {
  secrets: {
    jwt: 'learneverything'
  },
  dbUrl: process.env.MONGODB_URI || 'mongodb://localhost:27017/api-design'
}

Let me know if you need me to post anything else