Как щелкнуть карту, и при нажатии следующей кнопки выполняется перенаправление в зависимости от выбранной карты?

Здесь в этом коде две карты и при нажатии на карту она будет отмечена как выбранная. Щелкните карту, и при нажатии следующей кнопки выполняется перенаправление в зависимости от выбранной карты.

В этом коде при нажатии на одну карту выбирается и то, и другое - это тоже одна проблема. Только нажатие кнопки приводит к перенаправлению на страницу выбранной карты.

Используется маршрутизация для трех страниц: CardSelectOptionPage, SuccessPage, FailurePage.

Дизайн пользовательского интерфейса: Дизайн муравьев.

Вот ссылка на песочницу кода: https://codesandbox.io /s/select-card-moloe?file=/src/index.js

import { Button, Card, Col, Image, Row, Typography } from "antd";
import React, { useState } from "react";
import { icons } from "../assets/icons";
import "./CardSelectOption.scss";

const CardSelectOption = () => {
   const [clicked, setClicked] = useState(false);
   const chooseOptions = [
    {
       title: "Yes",
       description: "I need to redirect into one Page (Successfull Page)",
       icon: clicked ? icons.check : icons.EmptyBox,
    },
    {
       title: "No",
       description: "I need to redirect into another Page (UnSuccessfull Page)",
       icon: clicked ? icons.check : icons.EmptyBox,
    },
   ];
    
   return (
      <Row className="select_page_container">
        <Col xl={18} md={18} sm={24} xs={24} className="select_page_header">
           <h1>Select One Option</h1>
        </Col>
        <Row className="select_card_section">
          {chooseOptions.map((option, index) => (
          <Col xl={8} lg={8} sm={24} key={index} className="select_cards">
           <Card onClick={() => setClicked(!clicked)} className="card">
            <Row className="card_body">
              <Col xl={7} lg={6} md={6} sm={24} xs={24} className="icon_part">
                  <Image src={option.icon} preview={false} />
              </Col>
              <Col xl={17} md={18} sm={24} xs={24} className="card_content">
                <Col xl={16} lg={16} md={16} className="title">
                  <Typography.Title level={4}>
                    {option.title}
                  </Typography.Title>
                </Col>
                <Col xl={22} md={22} sm={24} xs={24} className="description">
                  <Typography.Text>{option.description}</Typography.Text>
                </Col>
               </Col>
              </Row>
            </Card>
          </Col>
         ))}
        </Row>
        <Col xl={12} md={12} sm={24} xs={24} className="submit_button">
          <Button size="large" type="primary">
           Next
          </Button>
        </Col>
       </Row>
     );
    };
    
    export default CardSelectOption;