React axiosでのデータ追加(input要素の追加)　IDの採番

前提

axiosを使用して下記サイトよりID 「1~10」までのデータを取得
https://jsonplaceholder.typicode.com/users

ID「11」からinput要素のデータを追加していく
新しいデータを追加する際に一緒にID「11」から採番したい

発生している問題・エラーメッセージ

追加データの２つ目以降のIDが同じ番号になってしまう

該当のソースコード

function Qaa() {

    const[user2,setuser2]=useState([])
    const [mail, setmail] = useState('')

    useEffect(()=>{

        axios.get('https://jsonplaceholder.typicode.com/users')

        .then(function (re) {
           setuser2(re.data)
             })
             .catch(function (error) {
                   console.log(error);
                 })
                 .finally(function () {
                     });
    },[])

      const change2 = (e) => {
        setmail(e.target.value)
      }
      
      const create2 = () => {
        if (mail==='') {
            return;
        }
        
        axios.post('https://jsonplaceholder.typicode.com/users', {
          email: mail
          
        })
        .then(res => {
          setuser2([...user2, res.data])
        })
        .catch(error => {
          console.log(error);
        });
      }

    return(
        <div>
            <input  onChange={change2} />
            <button onClick={create2}>作成2</button>
        <ul>
        {user2.map((user,index)=>(
            <List id={user.id} email={user.email} name={user.name} color='red' index={index}/>
        )
        )}
        </ul>

        </div>

    )
}

export default Qaa;

List.tsx

import type {User} from './user'
import type {FC} from 'react';

 const List=pp=>{

return(
    <>
        <li style={{ color:pp.color }}>
         {pp.id}__{index}
         <br />
         {pp.name}
         <br />
         {pp.email}
        </li>
    </>
)

}

export default List;