authenticate using email rather than username when using createStrategy() in passport.js

Question

using email as username field for authentication in passport.js

when I am registering for first time the document get added to the database but it doesn't redirect to 'secrets' page instead shows "bad request" on browser .

on second time it shows this error on terminal and redirects to register page:

    [nodemon] starting `node app.js`
    Server started on port 3000
    MongoServerError: E11000 duplicate key error collection: userDB.users index: username_1 dup key: { username: null }
        at C:\Users\Mahek\OneDrive\Desktop\secrets-passport\node_modules\mongodb\lib\operations\insert.js:50:33
        at C:\Users\Mahek\OneDrive\Desktop\secrets-passport\node_modules\mongodb\lib\cmap\connection_pool.js:331:21
        at C:\Users\Mahek\OneDrive\Desktop\secrets-passport\node_modules\mongodb\lib\sdam\server.js:209:17
        at handleOperationResult (C:\Users\Mahek\OneDrive\Desktop\secrets-passport\node_modules\mongodb\lib\sdam\server.js:337:20)
        at Connection.onMessage (C:\Users\Mahek\OneDrive\Desktop\secrets-passport\node_modules\mongodb\lib\cmap\connection.js:206:9)
        at MessageStream.<anonymous> (C:\Users\Mahek\OneDrive\Desktop\secrets-passport\node_modules\mongodb\lib\cmap\connection.js:61:60)
        at MessageStream.emit (node:events:513:28)
        at processIncomingData (C:\Users\Mahek\OneDrive\Desktop\secrets-passport\node_modules\mongodb\lib\cmap\message_stream.js:124:16)
        at MessageStream._write (C:\Users\Mahek\OneDrive\Desktop\secrets-passport\node_modules\mongodb\lib\cmap\message_stream.js:33:9)
        at writeOrBuffer (node:internal/streams/writable:392:12) {
      index: 0,
      code: 11000,
      keyPattern: { username: 1 },
      keyValue: { username: null },
      [Symbol(errorLabels)]: Set(0) {}
    }

this is the code that i am using for authetication.

app.use(session({
    secret: "Our Little Secret",
    resave: false,
    saveUninitialized: true,
}));

app.use(passport.initialize());
app.use(passport.session());

mongoose.connect("mongodb://127.0.0.1:27017/userDB");

const userSchema = new mongoose.Schema({
    email: String,
    password: String
});

userSchema.plugin(passportLocalMongoose, {
    usernameField: 'email'
});

const User = new mongoose.model("User", userSchema);

passport.use(User.createStrategy());

passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

packages im using are:

const mongoose = require('mongoose');
var session = require('express-session');
const passport = require('passport');
const passportLocalMongoose = require('passport-local-mongoose');

routes for registering and landing page:

app.post("/register", async function(req, res) {
    try {
        User.register({email: req.body.username}, req.body.password, function(err, user) {
            if (err) {
                console.log(err);
                res.redirect("/register");
            } else {
                passport.authenticate('local')(req, res, () => {
                    res.redirect('/secrets');
                });
            }
        });
    } catch (error) {
        console.log(error);
        res.redirect("/register");
    }
});

app.get('/secrets', (req, res) => {
    if (req.isAuthenticated()) {
      res.render('secrets');
    } else {
      res.redirect('/login');
    }
});

register.ejs:

          <form action="/register" method="POST">
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" class="form-control" name="username">
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" name="password">
            </div>
            <button type="submit" class="btn btn-dark">Register</button>
          </form>

please review this and help finding the solution.