Реагируйте на странное / глючное поведение автоматической прокрутки, когда переключается кнопка и изменяется состояние

Question

Я создал функциональный компонент ChoiceComponent, который содержит TextComponent (в основном заголовок h4) и два radio buttons. Каждый раз, когда кто-то нажимает на переключатель, он запускает handleRadioChange, используя useState hook, чтобы обновить текущий правильный выбор переключателя.

Тем не менее, я сталкиваюсь с чем-то очень странным в том, что всякий раз, когда нажимается переключатель, состояние перерисовывается, но оно также автоматически прокручивается до значения TextComponent (происходит, когда вы прокручиваете достаточно далеко. и нажимает кнопку радио). Однако, как только я закомментировал TextComponent, поведение автоматической прокрутки исчезло бы, поэтому я подозреваю, что что-то с этим связано. По сути, я создаю страницу с вопросом, поэтому поведение автоматической прокрутки вверх очень плохо, когда кто-то заполняет выбор переключателя.

Ниже приведен мой код, или вы можете попробовать его в Code Sandbox по этой ссылке https://codesandbox.io/s/weird-autoscroll-9dw96?fontsize=14&hidenavigation=1&theme=dark

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  // Button state and handler
  const [buttonChoice, setSetButtonChoice] = useState("1");
  const handleRadioChange = event => {
    const { value } = event.target;
    setSetButtonChoice(value);
  };

  // Some Text Component
  const TextComp = () => {
    return (
      <h4>
        With this, window autoscrolls back everytime a radio button is clicked.
        <br />
        Autoscrolls doesn't happen when this is commented out. Why?
      </h4>
    );
  };

  // Radio Comp with Text and Two Radio Buttons
  const RadioComp = () => {
    return (
      <React.Fragment>
        {/* Comment out TextComp to see diff */}
        <TextComp />
        <div>
          <input
            type="radio"
            value="1"
            checked={buttonChoice === "1"}
            onClick={handleRadioChange}
          />{" "}
          Button 1
          <input
            type="radio"
            value="2"
            checked={buttonChoice === "2"}
            onClick={handleRadioChange}
          />{" "}
          Button 2
        </div>
        <div style={{ marginTop: "600px" }}>White Space</div>
      </React.Fragment>
    );
  };

  return (
    <div className="App">
      <h2 style={{ paddingBottom: "450px" }}>
        Scroll down to click radio button{" "}
      </h2>
      <RadioComp />
    </div>
  );
}

У кого-нибудь есть объяснение того, что вызывает странное поведение автоматической прокрутки вверх и как его отключить? Большое спасибо.