javascript – React.js column-reverse make the parent scroll

Reproduce steps:

1. Click Add button five times
2. Scroll the message box div to top and bottom again
3. click Add button again.

The parent will be scrolled.
I can’t see the problem if I don’t use the ‘column-reverse’.
If I do the 2nd step, the element at the bottom is fixed to parent element (it is unexpected).

import React, { useEffect, useState, useRef } from "react";

export default function App() {
  const (messages, setMessages) = useState(());
  const addMessage = () => {
    setMessages((...messages, `new message-${messages.length}`));
  };
  const containerRef = useRef();
  useEffect(() => {
    containerRef.current.scrollTop = 250;
  }, ());
  return (
    <>
      <button
        style={{
          position: "fixed"
        }}
        onClick={addMessage}
      >
        Add
      </button>
      <div
        ref={containerRef}
        style={{
          display: "grid",
          overflow: "auto",
          height: "100vh"
        }}
      >
        <div
          style={{
            minHeight: "200px",
            background: "red"
          }}
        ></div>
        <div
          style={{
            display: "flex",
            overflow: "auto",
            flexDirection: "column-reverse",
            minHeight: "300px",
            maxHeight: "300px"
          }}
        >
          <div>
            {messages.map((msg, index) => (
              <div key={index} style={{ height: "100px" }}>
                {msg}
              </div>
            ))}
          </div>
        </div>
        <div
          style={{
            minHeight: "1000px",
            background: "blue"
          }}
        >
          bottom
        </div>
      </div>
    </>
  );
}