在if else语句中使用useState进行状态更改时出现问题

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

function App() {
  const [showCounter, setShowCounter] = useState(false);

  const handleToggleCounter = () => {
    setShowCounter(!showCounter);
  };

  return (
    <div>
      <button onClick={handleToggleCounter}>
        {showCounter ? 'Hide Counter' : 'Show Counter'}
      </button>
      {showCounter && <Counter />}
    </div>
  );
}

export default App;