I have a dropdown in my React app but when I click on one of the options, it doesn't select it, I have figured out I need a function to do so but don't know where to start. FYI: I am new to coding JavaScript. Also, I have nested my dropdown in my card component.

// Import React, useState and bootstrap components //
import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Card from "react-bootstrap/Card";
import Dropdown from "react-bootstrap/Dropdown";
import TotalPrice from "./TotalPrice";
import "./Box.css";

// create Products component //
export default function Products(props) {
  const handleSelect = () => {
    productCards.option1.option2.option3;
  };

  // Create productCards array of objects to store product information such as name, description, price etc //
  const productCards = [
    {
      image:
        "https://www.magicalmakeup.co.uk/cdn/shop/products/rose-champagne-main_1200x.jpg?v=1666704885",
      product_name: "Eye Twinkle",
      description:
        "Fine glitter topper to make any eye look pop and channel your inner fairy.",
      price: 12,
      title: "Select Colour",
      option1: "Blue Lagoon",
      option2: "Fairy Spell",
      option3: "Enchanted Forest",
    },
    {
      image:
        "https://colourpop.com/cdn/shop/files/Bundle-CupidsCalling.jpg?v=1714417894&width=988",
      product_name: "Flutter Blusher",
      description:
        "Velvety baked blusher for that natural flush and innocent fairy essence.",
      price: 15,
      title: "Select Colour",
      option1: "Pretty Petal",
      option2: "Pinched Peach",
      option3: "Pale Pink",
    },
  ];

  // create renderProducts function to render information in to assigned card and dropdown components //
  const renderProducts = (card, index) => {
    return (
      <Card style={{ width: "18rem" }} key={index} className="box">
        <Card.Img variant="top" src={card.image} />
        <Card.Body>
          <Card.Title>{card.product_name}</Card.Title>
          <Card.Text>{card.description}</Card.Text>
          <Card.Text>£{card.price}</Card.Text>
          <Dropdown key={index}>
            <Dropdown.Toggle
              style={{ backgroundColor: "grey", border: "2px, grey" }}
              id="dropdown-basic"
            >
              {card.title}
            </Dropdown.Toggle>

            <Dropdown.Menu onSelect={handleSelect}>
              <Dropdown.Item
                eventKey={card.option1}
                style={{
                  backgroundColor: "rgb(155, 72, 110)",
                  color: "rgb(252, 249, 250)",
                }}
                href="#/action-1"
              >
                {card.option1}
              </Dropdown.Item>
              <Dropdown.Item
                eventKey={card.option2}
                style={{
                  backgroundColor: "rgb(215, 104, 154)",
                  color: "rgb(252, 249, 250)",
                }}
                href="#/action-2"
              >
                {card.option2}
              </Dropdown.Item>
              <Dropdown.Item
                eventKey={card.option3}
                style={{
                  backgroundColor: "rgb(254, 125, 183)",
                  color: "rgb(252, 249, 250)",
                }}
                href="#/action-3"
              >
                {card.option3}
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
          {/* onClick event handle to toggle Total price to appear once a buy button has been clicked */}
          <Button
            style={{
              backgroundColor: "rgb(155, 72, 110)",
              border: "2px ,rgb(155, 72, 110)",
              margin: "4px",
            }}
            onClick={() => priceTotal(card.price)}
            value={card.price}
            variant="primary"
          >
            Buy
          </Button>
        </Card.Body>
      </Card>
    );
  };