Error E11000 while implementing authentication from two third party services

I have implemented authentication via Google and GitHub on my website. The issue is that when I’ve signed up via google and I try to sign up via GitHub (or vice versa) I get an error stating MongoServerError: E11000 duplicate key error collection: userDB.users index: username_1 dup key: { username: "my_name" }
It disappears when I add some text from my side in the username field inside findorcreate function.

Code:

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/google/secrets",
    userProfileURL: "https://www.googleapis.com/oauth2/v3/userinfo"
  },
  function(accessToken, refreshToken, profile, cb) {
    User.findOrCreate({ username: profile.displayName, googleId: profile.id }, function (err, user) {
      return cb(err, user);
    });
  }
));

passport.use(new GitHubStrategy({
    clientID: process.env.GITHUB_CLIENT_ID,
    clientSecret: process.env.GITHUB_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/github/secrets"
  },
  function(accessToken, refreshToken, profile, cb) {
    User.findOrCreate({ username: profile.displayName, githubId: profile.id }, function (err, user) {
      return cb(err, user);
    });
  }
));