Display a tooltip above a display grid, tooltip blocked by following rows - css

Question

I need to have my tooltip display above the grid table, but it keeps getting covered up by the row bellow (I will change it later so it shows only when hovered). I have tried, position absolute z-index position relative to multiple containers in different combinations, but nothing gets the tool tip over the row bellow. Thanks for the help!
<TableContainer>
<Row>
<ItemContainer>
<TreatmentContainer>
<TreatmentIconContainer>
<AttachmentIcon width={15} height={15} color={Gray1} />
</TreatmentIconContainer>
<TreatmentIconContainer>
<DownloadIcon width={15} height={15} color={Gray1} />
</TreatmentIconContainer>
</TreatmentContainer>
<ToolTip>hello</ToolTip>
</ItemContainer>
<ItemContainer>
<TreatmentContainer>
<TreatmentIconContainer>
<AttachmentIcon width={15} height={15} color={Gray1} />
</TreatmentIconContainer>
<TreatmentIconContainer>
<DownloadIcon width={15} height={15} color={Gray1} />
</TreatmentIconContainer>
</TreatmentContainer>
<ToolTip>hello</ToolTip>
</ItemContainer>
<ItemContainer>
<TreatmentContainer>
<TreatmentIconContainer>
<AttachmentIcon width={15} height={15} color={Gray1} />
</TreatmentIconContainer>
<TreatmentIconContainer>
<DownloadIcon width={15} height={15} color={Gray1} />
</TreatmentIconContainer>
</TreatmentContainer>
<ToolTip>hello</ToolTip>
</ItemContainer>
</Row>
<Row>
<TreatmentRow /> // this is the same as you see above
</Row>
<Row>
<TreatmentRow />
</Row>
<Row>
<TreatmentRow />
</Row>
<Row>
<TreatmentRow />
</Row>
<Row>
<TreatmentRow />
</Row>
</TableContainer>
const TableContainer = styled.View`
background: ${LightNeutral};
display: grid;
justify-items: center;
row-gap: 8px;
padding: 0px 0px 24px 0px;
`;
const Row = styled.View`
background: ${White};
display: grid;
padding: 0px 11px;
align-items: center;
border-radius: 16px;
max-width: 1200px;
display: grid;
justify-items: center;
`;
const ItemContainer = styled.View`
display: table-row-group;
margin: 16px 1px;
width: 72px;
display: grid;
justify-items: center;
`;
const TreatmentContainer = styled.View<{color: string}>`
display: flex;
width: 72px;
height: 72px;
padding: 8px;
background: ${LightNeutral};
border-radius: 16px;
${({color}) => `border-color: ${color};`}
border-width: 0;
border-top-width: 19px;
border-style: 'dashed';
flex-wrap: wrap;
align-content: flex-end;
justify-content: flex-end;
flex-direction: row;
`;
const TreatmentIconContainer = styled.Pressable`
margin: 3px;
`;
const ToolTip = styled.Text`
position: absolute;
z-index: 2;
top: 10;
width: 120px;
height: 74px;
margin: 21px 0 0;
border-radius: 8px;
background: ${Dark}
color: ${White}
`;