react いいね機能実装

Question

イメージ => SNSであるようないいね機能の小さいバージョンを作りたいと考えています。

具体的に...
現在
いいねすると他の人にも反映されてしまうためいいねボタン個々の管理が出来ていない。
=>自分の端末でいいねした時に同じ箇所が他の端末でいいねになってしまう。

どうしたいか...
detabase集計方法として、何が何回いいね押されたか管理したいです。

1つ目 = 1回
2つ目 = 3回
のような構図で管理したいです。
(どの人がなどの情報は特に付けません。)

const [showHeart, setShowHeart] = useState(false);
const [showHeartitems, setShowHeartitems] = useState([]);

・showHeart は、いいねボタン実装の(デザイン)でのtoggleに使っております。
・showHeartitems　は、いいねボタン実装の(デザイン)でのtoggleとデータベース管理に使っています。

---

realtime databaseへの管理コードです。↓

console.log(showHeartitems);

// ↑上記のconsole.logには[1,2,4]などのいいねが配列で渡される形

const toggleShowHeart = (key) => {
if (showHeartitems.includes(key)) {
setShowHeartitems(showHeartitems.filter(item => item !== key));
firebase.database().ref("/likes").set({likes:showHeartitems.filter(item => item !== key)});
} else {
setShowHeartitems([...showHeartitems, key]);
firebase.database().ref("/likes").set({likes:[...showHeartitems, key]});
}
};

useEffect(() => {
firebase.database().ref("/likes").on("value", (snapshot) => {
const data = snapshot.val()
if(!data) return
setShowHeartitems(data.likes)
})
}, [])

下記がdatabaseの図

project----
|likes
|likes
| 0 2
|__ 1 3

---

<div className="heart-back" id="heart-back" onClick={() => toggleShowHeart(photo.key)} style={{backgroundColor: showHeartitems.includes(photo.key) ? "#E0306C" : "white"}}> {/* 本体 */} <FaHeart className="faheart" id="faheart" onClick={() => toggleShowHeart(photo.key)} style={{color: showHeartitems.includes(photo.key) ? "white" : "#E0306C"}}/> </div>

上記のコードはいいねボタンの実装となっております。