前提

フロントエンド　React
バックエンド　Firestore

要件

Firestoreのupdateがしたい。

FirestoreにauthNameというキーで情報をアップロードしました。（これはすでにできている）

次にその内容を書き換えることをしたいのですがうまく書き換わりません。
（updatedAtは更新されているのでFirestoreと紐づいてはいるのは確認済）

また、onChangeも不具合があるようでフォームに文字を書き込もうとしてもうまく作動していないようです。

Firestore画像（一部モザイクかけています）

コード全文

jsx
1import React, { useState } from 'react';
2import { useForm } from 'react-hook-form';
3import firebase, { db } from '../../Firebase';
4import { useCollectionData } from "react-firebase-hooks/firestore";
5
6const Update = () => {
7    const { register, handleSubmit, errors } = useForm();
8
9    const user = firebase.auth().currentUser;
10    let authId;
11    let authName;
12
13    if (user != null) {
14        user.providerData.forEach(() => {
15            authId = user.uid;
16            authName = user.displayName;
17        });
18    }
19    
20    // Update
21    const [name, setName] = useState();
22    const [pending,setPending] = useState(false);
23    const updatedAt = firebase.firestore.FieldValue.serverTimestamp();
24    
25    const OnSubmit = async (uid) => {
26        setName('');
27        setPending(true);
28        try {
29            await firebase
30                db
31                .collection('users')
32                .doc(uid)
33                .update({
34                    updatedAt,
35                    authId,
36                    authName,
37                });
38        } finally {
39            setPending(false);
40        }
41    }
42    
43    // Render
44    const [ list, loading, error ] = useCollectionData(db.collection('users').orderBy('createdAt', 'desc'), { idField: 'docId' });
45
46    if (loading) return <div>Loading...</div>;
47    if (error) return <div>Error...</div>;
48    
49    return (
50        <>
51            <h2>Update</h2>
52
53            {list.map(item => (
54                <div key={item.docId + String(new Date())}>
55                {authId === item.authId ? (
56                    <>
57                        <form onSubmit={handleSubmit(OnSubmit)} className="">
58                            <input
59                                className=""
60                                value={ name }
61                                onChange={ e => setName(e.target.value) }
62                                placeholder=""
63                                name="authName"
64                                ref={register({ required: true })}
65                            />
66                            <button type="submit" onClick={ () => OnSubmit(item.docId) } className="post-button">Update</button>
67                            { pending && 'Pendeing...' }  
68                        </form>
69                    </>
70                ) : (
71                    <>
72                        ...省略
73                    </>
74                )}
75                </div>
76            ))}
77        </>
78    );
79}
80
81export default Update;