choose method modal style changes

"""
function ChooseMethodModal({ showModal, handleModalClose, handleContinue }: ChooseMethodModalProps) {
  const [activeCard, setActiveCard] = useState('draftWill');
  const [selectedWillCard, setSelectedWillCard] = React.useState({
    willTypeName: 'Templated Full Will',
    willTypeID: '6',
  });
  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    // dispatch<any>(fetchWillsList());
  }, []);

  /**
 * Handles the click event on the card and sets the active card name.
 *
 * @param {string} cardName - The name of the card that was clicked.
 * @return {void} This function does not return anything.
 */
  const handleCardClick = (cardName: string) => {
    setActiveCard(cardName);
    // log the card name
    console.log(cardName);
    // log active card
    console.log(activeCard);
    const { willTypeName, willTypeID } = results.find((will: any) => {
      if (cardName === 'draftWill') return will.willTypeName === 'Templated Full Will';
      if (cardName === 'willCopyUpload') return will.willTypeName === 'Full Will';
      return false;
    }) || { willTypeName: '', willTypeID: '' };
    setSelectedWillCard({ willTypeName, willTypeID });
  };

  const isAnyWillCardSelected = selectedWillCard.willTypeName !== '' && selectedWillCard.willTypeID !== '';

  return (
    <Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Draft Will Using the System
            </div>
            <div
              className="text-center choose-method-draft-will-desc"
              style={{ marginTop: '10px', marginBottom: '10px' }}
            >
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div
              className="choose-method-will-upload-icon-container"
              style={{ marginBottom: '20px', marginTop: '20px' }}
            >
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
  );
}
"""

when component loads, card-container-draft-will is selected by default. when user clicks on card-container-will-copy-upload, that element is selected. But when user clicks on card-container-draft-will again after clickin will-copy-upload, problem is when clicking continue button, Link is not naviating to the indented component/page. it is not moving to indented page.
please update the code. and make it correct.
but now when i click on card-container-draft-will element, COnitnue button not showing. please fix this bug.