Посты добавляются и и данные обновляются, но посты добавляются без "id", из за этого появляется предупреждение, что нет ключа у дочерних элементов

Новые посты добавляются и данные на странице обновляются. но посты добавляются без "id", хотя POST запрос возвращает с "id" { "title": "ewewerewr", "body": "werwerwer", "id": 101 } По причине того что, новые добавленные посты в списке без id получаю предупреждение что нет ключа у дочерних элементов, не могу понять в чем причина, если кто то может подсказать, то буду благодарен.

const form = useForm<Posts>()
const { register, control, handleSubmit, formState, reset } = form
const { errors } = formState;

const create = useMutation({
    mutationFn: addPosts,
    onMutate: async (newPost) => {
        await queryClient.cancelQueries({ queryKey: ["posts"] })

        const previousPosts = queryClient.getQueryData(["posts"]) as Posts[]

        queryClient.setQueryData<Posts[]>(["posts"], (old) => [...(old || []), newPost])

        return () => queryClient.setQueriesData(["posts"], previousPosts)
    }
})


const submit = (post: Posts) =>{
    console.log(post)

    create.mutate(post)
    reset();
};

    

POST запрос

    export const addPosts = async (post: Posts) => {
       return apiClient.post(`/posts?_limit=7`, post);
    };

рендер компонента

const PostCard = () =>{
const { data, error, isLoading} = useQuery({
    queryKey: ["posts"],
    queryFn: getAllPosts,
    refetchOnWindowFocus: false
});

if(error) return <p>Error!</p>
if(isLoading) return <p>Loading...</p>

return (
    <ul className="post-card">
        {data?.map((post) => (
            <li  className="post-card__item" key={post.id}>
                <p className="post-title">{post.title}</p>
                <p className="post-body">{post.body}</p>
            </li>
        ))}
    </ul>
)

};

export default PostCard;