[Solved]-make a wrapper function around map in react-Reactjs

You omitted to add return statement in marker function

You should add marker to the function or convert marker function to arrow one.

General function

function marker(idx) {
    return eventData.map((ev, index) => {
        if(ev.categories[0].id === idx) {
            console.log(ev);
            return <LocationMarker key = {index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => {
                setLocationInfo({ id: ev.id, title: ev.title });
                //support for toggle away info box
                setInfoBox(!infoBox);
            }} />
        }
        return null
    })
}

Arrow function

const marker = (idx) => eventData.map((ev, index) => {
    if(ev.categories[0].id === idx) {
        console.log(ev);
        return <LocationMarker key = {index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => {
            setLocationInfo({ id: ev.id, title: ev.title });
            //support for toggle away info box
            setInfoBox(!infoBox);
        }} />
    }
    return null
});