Передача функции OnChange с использованием React для раскрывающегося списка

У меня есть платежный компонент и настраиваемый раскрывающийся список. Я пытаюсь передать функцию с именем handlePaymentImageChange от родителя (платеж) к дочернему (раскрывающемуся списку), чтобы контролировать изменение изображения. Тем не менее, это не работает так хорошо, как я ожидаю. То, что я пытаюсь сделать, это отображение изображения на основе выбора раскрывающегося списка. В моем случае, если значение = 'Visa' -> отображать только изображение визы.

Подробности: https://codesandbox.io/s/serene-noether-s8pqc?file=/src/components/Payment/Payment.js

В моем Payment.js

function Payment() {
  const [paymentImage, setPaymentImage] = useState({
    id: 0,
    value: ""
  });

  const handlePaymentImageChange = (e) => {
    const { name, value } = e.target;
    setPaymentImage({
      ...paymentImage,
      [name]: value
    });
  };

return (
    <div className = "payment-container">
      <Dropdown
        title = "Select payment"
        items = {items}
        multiSelect = {false}
        handlePaymentImageChange = {handlePaymentImageChange}
      />

      {/* render specifed image based on the selected choice */}
      //REST RENDER CODE...
      // for example,     value = Visa -> render visa image only
      

    </div>
  );
 

В моем Dropdown.js

import React, { useState } from "react";
import "./Dropdown.css";

function Dropdown({
  title,
  items = [],
  multiSelect = false,
  handlePaymentImageChange
}) {
  const [open, setOpen] = useState(false);
  const [selection, setSelection] = useState([]);
  const [selectedValue, setSelectedValue] = useState(title);

  //REST DROPDOWN TOGGLE FUNCTION
  ...

  return (
    <div className = "dropdown-container">
      // pass the item.value to change the Payment state, then render the correct image
        {open && (
          <ul className = "dropdown-list">
            {items.map((item) => (
              <li
                className = "dropdown-list-item"
                key = {item.id}
                onChange = {() => handlePaymentImageChange(item.value)}
              >
                <button
                  type = "button"
                  onClick = {() => handleOnClick(item)}
                  value = {item.value}
                >
                  <span>{item.value}</span>
                  <span>{isItemInSelection(item) && "Selected"}</span>
                </button>
              </li>
            ))}
          </ul>
        )
}
    </div>
  );
}

export default Dropdown;

Любое решение?