React JS - Modal only appearing once

I am creating a Sign in modal using react which opens on a button click. The problem is that only appears once.
Here's the code for the modal

import { Modal } from "components/Modal";
import React, { useState, useEffect } from "react";

export default function SignInModal(props: any) {
  const { showSignInModal } = props;
  const [isOpen, setIsOpen] = useState(showSignInModal);
  useEffect(() => {
    setIsOpen(showSignInModal);
  }, [showSignInModal]);

  return (
    <div>
      <Modal
        isOpen={isOpen}
        onDismiss={() => {
          setIsOpen(false);
        }}
        title=""
      >
        <div className="text-white">Hello World</div>
      </Modal>
    </div>
  );
}

Here's the code for my index.js file

 const [showSignInModal, setShowSignInModal] = useState(false);

  function handleOpenConnect() {
    setShowSignInModal(true);
  }

return (
    <>
 <Button onClick={handleOpenConnect} >
  Sign In
 </Button>
<SignInModal showSignInModal={showSignInModal} />
</>
)

When I press the button again, it does not appear. I want it to appear each time the button is clicked.

The modal component is creating its own local copy of state and updating that local copy. So future updates to the parent's state don't change anything in that modal component.

Don't duplicate state.

If the modal should be controlled by the parent, it doesn't need its own internal state. Let it rely on the value provided:

export default function SignInModal(props: any) {
  const { showSignInModal, setShowSignInModal } = props;

  return (
    <div>
      <Modal
        isOpen={showSignInModal}
        onDismiss={() => {
          setShowSignInModal(false);
        }}
        title=""
      >
        <div className="text-white">Hello World</div>
      </Modal>
    </div>
  );
}

And pass in both the state and the setter:

<SignInModal showSignInModal={showSignInModal} setShowSignInModal={setShowSignInModal} />