I am trying to show a modal in front of the FullCalendar component, but it is transparent

Question

I am using FullCalendar v6 - the react connector with settings as plugins.

This is the way i handle visibility which has been working:

  function handleEventClick(eventClickInfo: any) {
    setSelectedEvent({
      title: eventClickInfo.event.title,
      description: eventClickInfo.event.extendedProps.description,
      location: eventClickInfo.event.extendedProps.location,
      host: eventClickInfo.event.extendedProps.host,
    });

    if(selectedEvent.title == eventClickInfo.event.title) {
        setIsVisible(isVisible? false : true);
    } else {
      setIsVisible(true);
    }
  }

This is the markup:

return (
        <div className="relative">
            <FullCalendar
                plugins={[dayGridPlugin, interactionPlugin]}
                initialView="dayGridMonth"
                events={events}
                contentHeight="auto"
                                 eventDisplay='flex'
                dayMaxEventRows={3}
                                eventClick={handleEventClick}
                    /> 
      { isVisible ? (
          <div className="absolute top-0 left-0 bg-blue-500 border-blue-700 p-4 text-black"> 
            {selectedEvent.title}
            <br/>
            {selectedEvent.description}
            <br/>
            {`hosted by: ${selectedEvent.host}`}
            <br/>
            {`Location: ${selectedEvent.location}`}
          </div>
       ) : null}
        </div>
    );

I'm using tailwind. So far the text inside does respond to CSS styles, but background styles for modal does not. I tried bumping the z-index to ridiculous numbers but it is the same. I'm guessing it might have something to do with the CSS styles the FullCalendar comes with? Somewhere there is a conflict in CSS styles but I can''t figure out where.

Funnily enough when I use dynamic CSS styles it works, but lines of FullCalendar are still visible.

<div className="custom-popup" style={{
            top: 50,
            left: 0,
            backgroundColor: '#3498db', // Change the background color as needed
            borderColor: '#2980b9', // Change the border color as needed
            padding: '10px',
            color: '#000', // Change the text color as needed
            position: 'absolute',
          }}> 
            {selectedEvent.title}
            <br/>
            {selectedEvent.description}
            <br/>
            {`hosted by: ${selectedEvent.host}`}
            <br/>
            {`Location: ${selectedEvent.location}`}
          </div>