How can I get a value from an array, when the person clicks, to send it to a function

To explain a bit, I have an array that shows me all the providers and the name of each one

          {orderByProviderBrand && this.sortingByAlphabet().map(r => {            return (<div              key={r.id}              className="provider-card"              onClick={() =>  this.props.history.push(`/home-providers/${r.id}`, { singleProviderId: r.id })}>                {r.disponible === true && <div className='logo' style={{ backgroundImage: `url(${process.env.REACT_APP_BFF_IMAGE}providers/${r.logo})` }}></div>}<div className='name-provider'>{r.name}</div></div>            )          })}

I need that when the user clicks on one of the providers, remove the name of that provider, to send it in a function that receives the name string.

export const moreInfoProvider = (providerName:string) => {FirebaseAnalytics.logEvent({name: "more_info",  params: {    provider_name:providerName    }}); }

This is in another class, import {moreInfoProvider} from '../firebase/firebaseTags' With that import I call the function and where I can get the name, send that parameter and travel there, but I can't get the name, I need help, please