React.js passing an list item to Database while in iteration

I have a list of items and want to iterate over them, create a div block with a button and if the user clicks on the button send this data to a function and then database. However with my code, instead of the item data, I only send undefined.

import React, {useState, useEffect} from 'react';
import './App.css';
import allItemsList from './allItemsList.json'

function App() {
  const itemsList = allItemsList[0].itemslist
  
  function addDemoButton (currentItem) {

    ///how do i pass the currentItem variable here to this function?

  }

  
  return (
    <div className="App">
      <div className="itembox">
      {itemsList.map((currentItem ) => (
                <div >
                  <h6>{`${currentItem}` }</h6>
                  <p>some information here</p>
                  <button onClick={(currentItem) => addDemoButton()}>Free Demo</button>
                </div>
            ))}
      </div>
    </div>
  );
}

this is the allitemslist.json that i import as allItemsList :

[
  {
    "itemslist": ["item1", "item2", "item3"]
  }
]