React Select Dropdown with Icon and Label

gistfile1.txt

import React, { useState } from "react";
import { FaList, FaChevronDown } from "react-icons/fa";
import CashIcon from "../../images/CashIcon.png";
import StripeIcon from "../../images/StripeIcon.png";
import CreditCardIcon from "../../images/CreditCardIcon.png";
import BankTransferIcon from "../../images/BankTransferIcon.png";
import Select, { components } from "react-select";

const DropDownWithSvg = ({ options }) => {
 
  const { Option, SingleValue } = components;
  const IconOption = (props) => {
    return (
      
        <Option {...props}>
          <div className="d-flex align-items-center">
            <img
              src={props.data.labelPic}
              alt={props.data.label}
            />
            {props.data.label}
         
        </Option>
      </div>
    );
  };

  const ValueOption = (props) => (
    <SingleValue {...props}>
      <div>{props.data.label}</div>
    </SingleValue>
  );

  const [selected, setSelected] = useState({
    label: "Choose Payment Method",
    value: null,
  });

  const handleChange = (newValue) => {
    setSelected({ label: newValue.label, value: newValue.value });
  }

  return (
    <div>
      <i>{<FaList color="#585858" />}</i>
      <Select
        onChange={handleChange}
        options={options}
        value={selected}
        components={{
          DropdownIndicator: () => <FaChevronDown className="down-indicator" />,
          Option: IconOption,
          SingleValue: ValueOption,
        }}
      />
    </div>
  );
};

DropDownWithSvg.defaultProps = {
  options: [
    { value: "Cash", label: "Cash", labelPic: CashIcon },
    { value: "Card", label: "Card", labelPic: CreditCardIcon },
    {
      value: "Bank Transfer",
      label: "Bank Transfer",
      labelPic: BankTransferIcon,
    },
    { value: "Stripe", label: "Stripe", labelPic: StripeIcon },
  ],
};

export default DropDownWithSvg;