Modal shows on page refresh

Having a difficult time with figuring out why modal shows on page refresh but does not show when About link is clicked. I think it has something to do with prop passing but do not understand what is going wrong.

App.js file:

function App() {
  const [showAboutModal, setShowAboutModal] = useState(false);
  const navLinkClicked = (selectedKey) => {
    if (selectedKey==='about') {
      alert(showAboutModal)
      setShowAboutModal(true)
    }
  }

  return (
    <div className="App">
      <AboutModal showAboutModal={showAboutModal}/>

      <Navbar collapseOnSelect expand="lg" bg="light">
      <Container>
        <img width="50" height="50" src={beacon} className="App-logo" alt="logo" />
        <Navbar.Brand href="/">Title</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">  
          </Nav>
          <Nav
            onSelect={(selectedKey) => navLinkClicked(selectedKey)}>
            <Nav.Link eventKey="about">About</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
    </div>
  );
}

export default App;

AboutModal.js file:

function AboutModal(showAboutModal) {


  const [showModal, setShowModal] = useState(showAboutModal);

  return (
      <Modal show={showModal}>
        <Modal.Header>
          <Modal.Title>About</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={()=>setShowModal(false)}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
  );
}

export default AboutModal;

I think the problem is in this line: const [showModal, setShowModal] = useState(showAboutModal);

The value for showAboutModal in the AboutModal component is always truthy and evaluates to an object like { "showAboutModal": false }. This means the modal will be visible on page load because you are using the object to toggle visibility and not the value of a specific key of that object.

The AboutModal component could either destructure the props in the function declaration or specify the key in the useState call as below:

function AboutModal({ showAboutModal }) { // destructure
  const [showModal, setShowModal] = useState(showAboutModal);
//...

//OR
function AboutModal(props) {
  const [showModal, setShowModal] = useState(props.showAboutModal); // specify key
//...