i want to add user data in table by unique id and console giving me warning " Warning: Each child in a list should have a unique "key" prop."

here is my adduser react component

import axios from "axios";
import { useState } from "react";

const AddUserData: React.FC<{ getUserAxios: () => void }> = ({
  getUserAxios,
}) => {
  const [Name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassWord] = useState("");
  const [userId, setUserId] = useState(1);

  const getUserData = () => {
    const newUserData = {
      id:userId,
      Name,
      email,
      password,
    };
    axios({
      method: "post",
      url: "http://localhost:3001/addNewUser",
      data: newUserData,
    })
      .then(function (response) {
        console.log(response);
        setTimeout(() => {
          getUserAxios();
        }, 1000);
      })
      .catch(function (error) {
        console.log(error);
      });
    setName("");
    setEmail("");
    setPassWord("");
     setUserId((prevUserId) => prevUserId + 1);
  };
  return (
    <>
      <form>
        <div className="input-group mb-3">
          <span className="input-group-text" id="basic-addon1">
            🙂
          </span>
          <input
            type="text"
            className="form-control"
            placeholder="User Firstname"
            aria-label="User Firstname"
            aria-describedby="basic-addon1"
            value={Name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div className="input-group mb-3">
          <span className="input-group-text" id="basic-addon1">
            🔑
          </span>
          <input
            type="text"
            className="form-control"
            placeholder="User Lastname"
            aria-label="User Lastname"
            aria-describedby="basic-addon1"
            value={password}
            onChange={(e) => setPassWord(e.target.value)}
          />
        </div>
        <div className="input-group mb-3">
          <span className="input-group-text" id="basic-addon2">
            💌
          </span>
          <input
            type="text"
            className="form-control"
            placeholder="Users Email"
            aria-label="Users Email"
            aria-describedby="basic-addon2"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <button
          type="button"
          className="btn btn-primary mx-2"
          onClick={getUserData}
        >
          Add
        </button>
        <button type="button" className="btn btn-secondary">
          Cancel
        </button>
      </form>
    </>
  );
};

export default AddUserData;

and here is my another compo

import axios from "axios";
import { useEffect, useState } from "react";
import AddUserData from "../AddUserData/AddUserData";
import { UserType } from "../store/stype-store";

const UserDataTable = () => {
  const [users, setUsers] = useState <UserType[]>([]);

  const getUserAxios = () => {
    axios
      .get("http://localhost:3001/usersData")
      .then((res) => {
        console.log("Response from axios", res.data);
        const { allUsers } = res.data;
        console.log("allUsers from axios", allUsers);
        setUsers(allUsers);
      })
      .catch((err) => {
        console.log("err from axios", err.message);
      });
  };
  useEffect(() => {
    getUserAxios();
  }, []);

  const userMap = users.map((user: UserType, index) => {
    return (
      <tr key={user.id}>
        <th scope="row">{index}</th>
        <td>{user.Name}</td>
        <td>{user.password}</td>
        <td>{user.email}</td>
      </tr>
    );
  });

  return (
    <>
      <div className="col-lg-7 p-3 p-lg-5 pt-lg-3 ">
        <table className="table table-striped">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Name</th>
              <th scope="col">Password</th>
              <th scope="col">E-Mail</th>
            </tr>
          </thead>
          <tbody>{userMap}</tbody>
        </table>
      </div>
      <div className="col-lg-4 p-3 p-lg-5 pt-lg-3">
        <AddUserData getUserAxios={getUserAxios} />
      </div>
    </>
  );
};

export default UserDataTable;

and here is my node server

const express = require("express");
const cors = require("cors");
const app = express();

const port = 3001;

app.use(express.json());
app.use(
  cors({
    origin: "*",
  })
);

let previousUserData = [
  {
    id: 1,
    Name: "RAHUL",
    password: "1w2e2w",
    email: "affj@gmail.com",
  },
  {
    id:2,
    Name: "CHAHUL",
    password: "1w2e2w",
    email: "affj@gmail.com",
  },
];

app.get("/usersData", (req, res) => {
  res.send({ status: 200, allUsers: previousUserData });
});


app.post("/addNewUser", (req, res) => {
  const { id, Name, password, email } = req.body;
  if (Name && password && email) {
    previousUserData = [...previousUserData, { id, Name, password, email }];
    res.send({ status: 200, msg: "user added", allUsers: previousUserData });
  } else {
    res.send({ status: 500, msg: "something went wrong" });
  }
});

app.listen(port, () => {
  console.log("Server started on port " + port);
});

I want give an unique id to each user if we add another one and also want remove the key prop value

> lang-js
> const [userId, setUserId] = useState(1);
>

This code is going to conflict with your previousUserData which already has an id: 1 record.

I would recommend not assigning the record ID from the client-side. Instead, develop a server-side strategy for generating IDs.

In your case it could be as simple as the following

const getNextId = () => previousUserData.length;

// or if you want a better guarantee
// const getNextId = () => Math.max(...previousUserData.map(({ id }) => id)) + 1;

app.post("/addNewUser", (req, res) => {
  const { Name, password, email } = req.body;
  if (Name && password && email) {
    previousUserData.push({
      id: getNextId(),
      Name,
      password,
      email,
    });
    res.json({ msg: "user added", allUsers: previousUserData });
  } else {
    res.status(500).send({ msg: "something went wrong" });
  }
});