Multiple Overlay Widget Overlapping each other when tapping will be incorrect

[longb1997]

Hi, in my case, if you have multiple OverlapWidget overlapping each other. When you press it will only press the first OverlapWidget. Look like this:

Since Overlap 2 has a height inside the first Overlap, when I press overlap 2, it activates the first Overlap. Thanks for helping!

This is code I used

{hours.map((hour, index) => {
        let eventsThisHour = eventsGroupedByHour[hour] ?? [];
        return (
          <OverlapWidget style={{width:'match_parent', height:'match_parent'}}>
            {eventsThisHour.map((meeting, meetingIndex) => {
              const meetingTime = moment(meeting.time, 'X');
              let eventHeight = calculateEventHeight(meeting, hourHeight);
              let eventTopOffset = calculateEventTopOffset(meeting, hourHeight, index);
              let eventOffsetX = calculateEventOffsetX(widgetWidth, meetingIndex)
               return (
                 <FlexWidget
                   key={meeting.id}
                   clickAction="OPEN_MEETING"
                   clickActionData={{
                     uri: `${baseDeepLink}${meeting.id}`,
                   }}
                   style={{
                     height: eventHeight,
                     backgroundColor: '#FFF',
                     borderRadius: 4,
                     width: widgetWidth / 4,
                     marginTop: eventTopOffset,
                     marginLeft: eventOffsetX,
                     borderColor: '#1E88E5',
                     borderWidth: 1,
                   }}
                 >
                   <STextWidget
                     truncate="END"
                     maxLines={1}
                     text={meeting.name}
                     type={'bold'}
                     textStyle={{
                       fontSize: 8,
                       color: '#2F3139',
                       paddingHorizontal: 2
                     }}
                   />
                 </FlexWidget>
            )})}
          </OverlapWidget>
        );
      })}