React-Calendar-Timeline modal z-Index not working properly

I am using React-Calendar-TimeLine to create a custom timeline, I have been having problems to set a modal to show properly right bellow an item.

Here is an image of what is happening:

Modal Z-index not working properly

Modal not Working inspect element

Here is my code for the timeline and modal:

import { useState } from 'react'
import Timeline from 'react-calendar-timeline'
import moment from 'moment'
import "./styles.css"
import {ItemModal} from './style'

function App() {
  const [id, setId] = useState("")
  const groups = [
    { id: 1, title: 'group 1' },
    { id: 2, title: 'group 2' }
  ]

  const items = [
    {
      id: 1,
      group: 1,
      title: 'item 1',
      start_time: moment(),
      end_time: moment().add(1, 'hour'),
      itemProps: {
        style: {
          zIndex: 1000
        }
      }
    },
    {
      id: 2,
      group: 2,
      title: 'item 2',
      start_time: moment().add(-0.5, 'hour'),
      end_time: moment().add(0.5, 'hour')
    },
    {
      id: 3,
      group: 1,
      title: 'item 3',
      start_time: moment().add(2, 'hour'),
      end_time: moment().add(3, 'hour')
    }
  ]



  const itemRenderer = ({
    item,
    itemContext,
    getItemProps,
    getResizeProps
  }) => {
    const { left: leftResizeProps, right: rightResizeProps } = getResizeProps()
    return (
      <div
        {...getItemProps(item.itemProps)}
        onDoubleClick={() => {
          if (id === item.id) {
            setId("")
          } else {
            setId(item.id)
          }
        }}
      >
        {itemContext.useResizeHandle ? <div {...leftResizeProps} /> : ''}
        {id === item.id ? (
          <ItemModal className="item-modal">
            <span>Teste</span>
          </ItemModal>) : null}
        <div
          className="rct-item-content"
          style={{ maxHeight: `${itemContext.dimensions.height}` }}
        >
          {itemContext.title}
        </div>
        {itemContext.useResizeHandle ? <div {...rightResizeProps} /> : ''}

      </div>
    )
  }

  return (
    <div style={{ border: "1px solid black", height: "100vh" }}>
      <Timeline
        groups={groups}
        items={items}
        defaultTimeStart={moment().add(-12, 'hour')}
        defaultTimeEnd={moment().add(12, 'hour')}
        itemRenderer={itemRenderer}
      />
    </div>
  );
}

export default App;

Here is my general CSS:

.react-calendar-timeline * {
  box-sizing: border-box; }

.react-calendar-timeline .rct-outer {
  display: block;
  overflow: hidden;
  white-space: nowrap; }

.react-calendar-timeline .rct-scroll {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-touch-action: none;
  touch-action: none; }


.react-calendar-timeline .rct-item .rct-item-content {
  position: sticky;
  position: -webkit-sticky;
  left: 0px;
  overflow: hidden;
  display: inline-block;
  border-radius: 2px;
  padding: 0 6px;
  height: 100%; }

.react-calendar-timeline .rct-sidebar {
  overflow: hidden;
  white-space: normal;
  display: inline-block;
  vertical-align: top;
  position: relative;
  box-sizing: border-box;
  border-right: none; }
  .react-calendar-timeline .rct-sidebar.rct-sidebar-right {
    border-right: 0;
    border-left: none; }
  .react-calendar-timeline .rct-sidebar .rct-sidebar-row {
    padding: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
    margin: 0;
    border-bottom: none; }
    .react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-odd {
      background: rgba(0, 0, 0, 0.05); }
    .react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-even {
      background: transparent; }

.react-calendar-timeline .rct-vertical-lines .rct-vl {
  position: absolute;
  border-left: none;
  z-index: 30; }
  .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-vl-first {
    border-left-width: 2px; }
  .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-6, .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-0 {
    background: rgba(250, 246, 225, 0.5); }

.react-calendar-timeline .rct-horizontal-lines {
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none; }
  .react-calendar-timeline .rct-horizontal-lines .rct-hl-even,
  .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
    border-bottom: none;
    box-sizing: border-box;
    z-index: 40; }
  .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
    background: rgba(0, 0, 0, 0.05); }
  .react-calendar-timeline .rct-horizontal-lines .rct-hl-even {
    background: transparent; }

.react-calendar-timeline .rct-cursor-line {
  position: absolute;
  width: 2px;
  background: #1f4ae4;
  z-index: 51; }

.react-calendar-timeline .rct-dateHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-bottom: none;
  cursor: pointer;
  font-size: 14px;
  background-color: #fff;
  border-left: none; }

.react-calendar-timeline .rct-dateHeader-primary {
  background-color: initial;
  border-left: none;
  border-right: none;
  color: #000; }

.react-calendar-timeline .rct-header-root {
  background: #fff;
}

.react-calendar-timeline .rct-calendar-header {
  border: none; }

.react-calendar-timeline .rct-item:hover {
  z-index: 88; }
/* 
.item-modal{
  position: absolute;
  width: 100px;
  height: 400px;
  top: 20px;
  background-color: #fff;
  color: #000;
  border: 2px solid #000;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
  z-index: 100 !important;
}   */

and last my code for the styled component:

import styled from "styled-components";

export const ItemModal = styled.div`
  position: absolute;
  width: 100px;
  height: 400px;
  top: 20px;
  background-color: #fff;
  color: #000;
  border: 2px solid #000;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
  z-index: 10000000 !important;
`

As you can check I have tried to use styled-components, css, !important, but doesn`t matter what I do the modal does not behave properly, hope someone has been through this and has an workarround to give me some light