React OnClick event not passing parameter, rather passing SyntheticBaseEvent

I am creating a modal. This modal will be opened when any of 6 div elements are clicked. Each of the components are created using the .map() function to an array. The popup parameter is supposed to be the function that runs when clicked:

items.map(item => (
  <StoreItem popup={() => popup} item={item} />
))         

For each item from items, there is a StoreItem created. Here is the code for the StoreItem component:

const StoreItem = ({popup, item}) => {
  return (
    <div onClick={popup(item)} className="...">
    ...
    </div>
  );
};

As seen above, each StoreItem is a div with an onClick property that runs the popup() function. Here’s the popup() function:

function popup(item) {
    console.log(item);
}

For some reason, when I console.log(item), the item that is supposed to be passed in from the onClick is not being logged. Rather, I’m getting a SyntheticBaseEvent with random stuff that I don’t want.

How is this fixed so that the contents of item are properly displayed, not some SyntheticBaseEvent?

Thanks, any help is appreciated.