Scroll to the last item of a mapped array

I have a Message component that displays all the messages(incoming and outgoing) in one thread.

I would like the last message/a newly typed message/incoming message to always appear at the bottom of the conversation. Kind of like what all chats/messaging apps do.

Here is my code:

import React, { useRef } from "react";

const dummy = useRef();

...

dummy?.current?.scrollIntoView(true, {
    behaviour: "auto",
});

... 

<div className="">
  <Paper
    elevation={0}
    sx={{
      backgroundColor: "#fafafa",
      maxHeight: 200,
      overflow: "auto",
    }}
  >
    {messages.map((message, idx) => (
      <div key={idx} ref={dummy}>
        <Message message={message} name={name} />
      </div>
    ))}
    {/* I tried this also
    <div ref={dummy}></div> */}
  </Paper>
</div>

I want all the messages that can fit in the maxHeight: 200 to be displayed with the last message just at the bottom when I click on the conversation/thread. Currently, the WHOLE page scrolls to bottom instead of just the messages in the thread. The page should remain stationary.

How do I do this?