React doesn't update components sometimes?

Question

I have a following structure in React, but whenever I click on the buttons, the rendering is not changed:

function App() {
  const [showTxt1, setShowTxt1] = useState(false);
  const [showTxt2, setShowTxt2] = useState(false);

  const setShowButtons = (selected) => {
    console.log("selected:", selected);
    
    setShowTxt1(selected === "txt1");
    setShowTxt2(selected === "txt2");
  }

  return (
    <React.Fragment>
      <div className="main">
        <div className="main-options">
          <button
            type="button"
            className="btn btn-primary"
            onClick={() => {
              setShowButtons("txt1");
            }}
          >
            Show Txt1
          </button>
          <button
            type="button"
            className="btn btn-primary"
            onClick={() => {
              setShowButtons("txt2");
            }}
          >
           Show Txt2
          </button>
        </div>
        {
          showTxt1 && <p>text1</p>
        }
        {showTxt2 &&  <p>text2</p>
        }
      </div>
    </React.Fragment>
  );
}

I see the log on the console, but the page is not updated. On the 'Components' tab in debugging, I only get an error message: 'Timed out, while inspecting...'

• This is a simplified version of my app, where I think the issue is.

Sometimes when I open a new tab (and thus the debugger is closed), it works. What can cause the issue?