Getting Error: 11000 in user registration form

so i was just making a normal user registration form using react + express js + mongodb , and i am running into an issue where if i try to register the user for the first time it works properly but if i try to add another user it gives me error 11000The structure for the frontend code is something like this :there are three component files: Signup form, Basic Info, Part1Signup Form.js

// Signup form .js
import React, { useState } from 'react';
import axios from 'axios';
import BasicInfo from './Signup/BasicInfo';

const SignupForm = () => {
  const sendRequest = async (values) => {
    try {
      const response = await axios.post('http://localhost:5000/', values);
      console.log(response.data);

    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <BasicInfo onComplete={sendRequest}  />
    </div>
  );
};

export default SignupForm;

Basic Info.js
import React, { useState } from 'react';
import Part1 from './Part1';

const BasicInfo = ({onComplete}) => {
    const [formData, setFormData] = useState({
        username: '',
        email: '',
        password: '',
    })

    const handleUserInput = (e) => {
        setFormData({...formData, [e.target.name]: e.target.value})
    }
    // when will this onComplete function be triggered?
    /* 
        on the click of the submit button i will check if the whole form is complete or not if yes then the oncomplete function will be triggered
        next task is to get the data in basicinfostructure
          
        error 11000 is occuring, for data redundancy, i need to clear the data 
      */
    
    const checkSubmit = (e) => {
        e.preventDefault();
        // Check if all fields are filled
        if (formData.username && formData.email && formData.password) {
          onComplete(formData);
          
        } else {
          alert('Please complete all fields');
        }
      };
    
    return (
    <div name='basicInfo'>   

        <Part1 formData={formData} handleUserInput={handleUserInput} />
        <button type='submit' onClick={checkSubmit}>Submit</button>
    </div>
  )
}
export default BasicInfo;

// Part1

import React from 'react';

const Part1 = ({ formData, handleUserInput }) => {
  return (
    <form>
      <label>Username</label>
      <input
        type='text'
        name='username'
        value={formData.username}
        onChange={handleUserInput}
      />
      <br />
      <label>Email Address</label>
      <input
        type='email'
        name='email'
        value={formData.email}
        onChange={handleUserInput}
      />
      <br />
      <label>Password</label>
      <input
        type='password'
        name='password'
        value={formData.password}
        onChange={handleUserInput}
      />
      <br />
    </form>
  );
};

export default Part1;

Please ignore the comments in my code that was just me writing my own thoughts there XD, also this is supposed to be a multi step signup form but i have only made part1 for now which is not working
also here is the backend server code

const express = require('express');
const cors = require('cors');

const app = express();
 
app.use(express.json());
app.use(cors());

const User = require('./model/user');

require('./db/connection');

app.post('/', async(req, res) => {
  let user = new User(req.body);
  let result = await user.save();
  res.send(result);
})

app.listen(5000, ()=>{console.log('Server started at port 5000')});

           throw new error_1.MongoServerError(res.writeErrors[0]);
                  ^

MongoServerError: E11000 duplicate key error collection: new-test.users index: basicInfo.username_1 dup key: { basicInfo.username: null }       
    at InsertOneOperation.execute (C:UsersakshaOneDriveDesktopPractise FolderNew folderNew Authhhnode_modulesmongodbliboperationsinsert.js:51:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async executeOperation (C:UsersakshaOneDriveDesktopPractise FolderNew folderNew Authhhnode_modulesmongodbliboperationsexecute_operation.js:136:16)
    at async Collection.insertOne (C:UsersakshaOneDriveDesktopPractise FolderNew folderNew Authhhnode_modulesmongodblibcollection.js:155:16) {
  errorResponse: {
    index: 0,
    code: 11000,
    errmsg: 'E11000 duplicate key error collection: new-test.users index: basicInfo.username_1 dup key: { basicInfo.username: null }',
    keyPattern: { 'basicInfo.username': 1 },
    keyValue: { 'basicInfo.username': null }
  },
  index: 0,
  code: 11000,
  keyPattern: { 'basicInfo.username': 1 },
  keyValue: { 'basicInfo.username': null },
  [Symbol(errorLabels)]: Set(0) {}
}

I tried logging and stuff but it didn’t really help so this is my last resort even chat gpt couldn’t help , help me guys plsss