React component dispatching generic payload

I trying to create a reusable <Column /> component that displays a list of items which each dispatch a generic payload specified by the caller when clicked.

My column takes an onItemClick prop which is a function that dispatches a payload (a Redux action in my actual code). I want my function to be able to accept and dispatch a generic <PayloadType>:

type ColumnProps<PayloadType> = {
  menuItems: { name: string; id: number }[];
  onItemClick: (payload: PayloadType) => void;
};

const Column = <PayloadType extends {}>(
  props: React.PropsWithChildren<ColumnProps<PayloadType>>
) => {
  const { menuItems, onItemClick } = props;
  const handleButtonClick = (menuItem: MenuItem) => {
    onItemClick({ info: menuItem.name });
    /* 
     Argument of type '{ info: string; }' is not assignable to parameter of type 
     'PayloadType'.
     '{ info: string; }' is assignable to the constraint of type 'PayloadType', but 
     'PayloadType' could be instantiated with a different subtype of constraint '{}'
    */
  };
  return (
    <>
      {menuItems.map((menuItem, index) => (
        <button key={index} onClick={(event) => handleButtonClick(menuItem)}>
          {menuItem.name}
        </button>
      ))}
    </>
  );
};

Using the component:

type MenuItem = {
  name: string;
  id: number;
};

const testMenuItems: MenuItem[] = [
  { name: "Vanilla", id: 0 },
  { name: "Strawberry", id: 1 },
  { name: "Chocolate", id: 2 },
  { name: "Cookies & Cream", id: 3 }
];

type ColumnPayload = {
  info: string;
};

export default function App() {
  const columnClickHandler = (payload: ColumnPayload) => {
    console.log(`clicked: ${payload.info}`);
  };
  return (
    <div className="App">
      <Column<ColumnPayload>
        menuItems={testMenuItems}
        onItemClick={columnClickHandler}
      />
    </div>
  );
}

As seen above, I’m receiving the error:

Argument of type '{ info: string; }' is not assignable to parameter of type 'PayloadType'.
  '{ info: string; }' is assignable to the constraint of type 'PayloadType', but 'PayloadType' could be instantiated with a different subtype of constraint '{}'.

How can I accept and dispatch a generic payload from my component? I’m fairly new to TypeScript so I’m not sure if I’m missing something or simply approaching the problem completely wrong.

Sandbox: https://codesandbox.io/s/sweet-kalam-tt5u5?file=/src/App.tsx