Firebase - set() doesn't change the value, creates new doc instead - reactjs

Question

I'm trying to create read / unread chat option that will set the read value to true if opened.
When I do click the chat it opens the right db entry but doesn't set the value of read, instead it creates a new doc in my collection with read:true.
import {Avatar} from "#material-ui/core";
import StopRoundedIcon from "#material-ui/icons/StopRounded"
import "./Chat.css";
import ReactTimeago from "react-timeago";
import {selectImage} from "./features/appSlice";
import {useDispatch} from "react-redux";
import {db} from "./firebase";
import {useHistory} from "react-router-dom";
function Chat({id, username, timestamp, read, imageUrl, profilePic}) {
const dispatch = useDispatch();
const history = useHistory();
const open = () => {
if(!read) {
dispatch(selectImage(imageUrl));
db.collection("posts").doc(id).set(
{
read:true,
},
{merge:true}
);
history.push('/chats/view');
}
};
return (
<div onClick={open} className="chat">
<Avatar className="chat__avatar" src={profilePic} />
<div className="chat__info">
<h4>{username}</h4>
<p>Tap to view - <ReactTimeago date={new Date(timestamp?.toDate()).toUTCString()} /></p>
</div>
{!read && <StopRoundedIcon className="chat__readIcon" />}
</div>
)
}
export default Chat
Chat shouldn't be available for preview if the read value is true.
Preview that adds values to collection:
import {useSelector, useDispatch} from "react-redux";
import { useHistory } from "react-router-dom";
import {useEffect} from "react";
import {selectCameraImage, resetCameraImage} from "./features/cameraSlice";
import "./Preview.css";
import CloseIcon from "#material-ui/icons/Close";import TextFieldsIcon from '#material-ui/icons/TextFields';import CreateIcon from '#material-ui/icons/Create';import NoteIcon from '#material-ui/icons/Note';import MusicNoteIcon from '#material-ui/icons/MusicNote';import AttachFileIcon from '#material-ui/icons/AttachFile';import CropIcon from '#material-ui/icons/Crop';import TimerIcon from '#material-ui/icons/Timer';import SendIcon from '#material-ui/icons/Send';
import {v4 as uuid} from "uuid";
import {storage, db} from "./firebase";
import firebase from "firebase";
function Preview() {
const cameraImage = useSelector(selectCameraImage);
const history = useHistory();
const dispatch = useDispatch();
useEffect(() => {
if(!cameraImage) {
history.replace('/')
}
}, [cameraImage, history]);
const closePreview = () => {
dispatch(resetCameraImage());
};
const sendPost = () => {
const id = uuid();
const uploadTask = storage.ref(`posts/${id}`).putString(cameraImage, "data_url");
uploadTask.on('state_changed', null, (error) => {
console.log(error)
},
() => {
storage.ref('posts').child(id).getDownloadURL().then((url) => {
db.collection('posts').add({
imageUrl:url,
username:'Egon',
read:false,
//profilePic
timestamp:firebase.firestore.FieldValue.serverTimestamp(),
});
history.replace('/chats');
});
});
};
return (
<div className="preview">
<CloseIcon className="preview__close" onClick={closePreview} />
<div className="preview__toolbarRight">
<TextFieldsIcon />
<CreateIcon />
<NoteIcon />
<MusicNoteIcon />
<AttachFileIcon />
<CropIcon />
<TimerIcon />
</div>
<img src={cameraImage} alt="" />
<div onClick={sendPost} className="preview__footer">
<h2>Send Now</h2>
<SendIcon fontSize="small" className="preview__sendIcon" />
</div>
</div>
)
}
export default Preview
and Chats component that calls Chat function and passes id:
import {useState, useEffect} from "react";
import {Avatar} from "#material-ui/core";
import "./Chats.css";
import SearchIcon from "#material-ui/icons/Search";
import ChatBubbleIcon from "#material-ui/icons/ChatBubble";
import {db} from "./firebase";
import Chat from "./Chat";
function Chats() {
const [posts, setPosts] = useState([]);
useEffect(() => {
db.collection('posts').orderBy('timestamp', 'desc').onSnapshot(snapshot => setPosts(snapshot.docs.map(doc => ({
id:doc.id,
data:doc.data(),
}))))
}, [])
return (
<div className="chats">
<div className="chats__header">
<Avatar className="chats__avatar" />
<div className="chats__search">
<SearchIcon />
<input placeholder="Friends" type="text" />
</div>
<ChatBubbleIcon className="chats__chatIcon" />
</div>
<div className="chat__posts">
{posts.map(({id, data: {profilePic, username, timestamp, imageUrl, read}}) => (
<Chat key={id} username={username} timestamp={timestamp} imageUrl={imageUrl} read={read} profilePic={profilePic} />
))}
</div>
</div>
)
}
export default Chats

Answer 1

Found the solution, I forgot to add id in Chat component while maping them.
<div className="chat__posts">
{posts.map(({id, data: {profilePic, username, timestamp, imageUrl, read}}) => (
<Chat key={id} id={id] username={username} timestamp={timestamp} imageUrl={imageUrl} read={read} profilePic={profilePic} />
))}
</div>