New component not rendering correctly - reactjs

Question

const [data, setData] = useState([]);
const addOne = (newObj) => {
setData((prev) => {
return [newObj, ...prev];
});
};
The above is called and adds a new object to my array when I have finished making calls to my backend.
I get the data from there like so:-
const [posts, refreshPosts, loadingPosts, reachedEnd, resetPosts, addOne] =
usePaginate(
`post/wall/${id}/${toSkip}`,
{
method: "GET",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
},
setToSkip
);
Then pass the above into the feed component:-
const posts = props.posts.map((item) => {
return <Post data={item} />});
Where I create my post objects from the data, then inside post I create a new post and try to add the returned value to my array through the addOne method that I posted above:-
const handleClick = async () => {
const url = "post";
const options = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
method: "POST",
body: JSON.stringify({ content: value, location: id }),
};
const post = await fetchData(url, options);
reset();
props.addOne(post)};
But it doesn't seem to trigger a re-render. Inside the post component I make calls that depend on the ID of the new object that was added, as an example:-
const [
commentData,
refreshComments,
loadingComments,
reachedEnd,
resetComments,
addOne,
] = usePaginate(
`post/comments/${props.data._id}/${toSkip}`,
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
method: "GET",
},
setToSkip
);
I would expect with a new object, an entirely new post to be created, but it doesn't seem to do that. What seems to happen is that the first element on the page re-renders partially
<div className="postContent">
{profData && props.data.content} </div>
So the text content of the top element on the page changes to reflect the correct text content of the post I'm trying to add, but then if I add a new comment to the new post, then add another post on top of that, only the props.data.content part changes, and the "shell" of the post remains the same (i.e. the entire post doesn't shift down, so the comments remain on the top post of the page, even though they should be on the second post at that point because the top post is now displaying the content from the newest data item).
resetComments();
refreshComments();
refreshLikes();
I can manually fire reach dataloader individually and then everything seems to work as expected, but it feels like I shouldn't have to do it because they should detect that a new item has been added to my array and just create an entirely new post object from it? It doesn't seem to be any issue with my backend because once I refresh the page everything is as should be. I can add any more information required, just didn't want to bloat the post so tried to pick the functions that seemed relevant to the problem, but I know something else could cause a side effect. It has been bugging me for hours.
The git link is here if anyone could have a look a bit more closely: -
https://github.com/Legandjl/odinbook_client
-edit
So far thanks to the comment I have changed return [newObj, ...prev] to return [...prev, newObj] and it seems to work okay when the new post is being rendered last, but then if I try to prepend or unshift the new object, like const newArr = [...prev], newArr.unshift(newObj) I either get a blackscreen or the same issue.

Answer 1

solved with the help of this post:-
problem when adding new item to start of array in react
const posts = props.posts.map((item, i) => {
return <Post key={item._id} data={item} />;
});
posts needed a unique key, tried with index and it didn't work but then used the _id and now all is as expected. Thanks all who tried to help me.