How to animate my tailwind project's threaded comments when votes changes

I use firebase V9, next JS latest version, tailwind css v3.0.24

My current version:

when the page render, I get all my comments from firestore order by votes like this

useEffect(
    () =>
      onSnapshot(
        query(
          collection(db, "routes", routeId, "comments"),
          orderBy("votesCount", "desc")
        ),
        (snapshot) => setComments(snapshot.docs)
      ),
    [db]
  );

then I map through and render out my comment component:

{comments?.map((comment) => (
  <div className="mx-auto my-7 max-w-5xl transition-transform"
       key={comment.id}
  >
    <Comment
      routeId={routeId}
      comment={comment.data()}
      commentId={comment.id}
    />
  </div>
))}

This works perfectly but in this situation: For example when I have 2 comments with 0 votes and vote for the second one to "up". it updates instantly, which is ok. But I want the comments order to be switched with a slide up animation to take the other comment's place and I want the screen to follow the voted comment. Cause I actually have long threads.

I have no idea how could I do that so please if you know or have seen a video explaining this process, sharing the information would be helpfull.