How to positioning tooltip always above the children - css

Question

I am making tooltip with antd library. I wanted to change the basic styles, so I needed to override styles. Here is the code:
import * as Styled from './Tooltip.styles';
type Props = {
title: string;
children: React.ReactNode;
};
export const CustomTooltip = ({ title, children }: Props) => (
<Styled.Tooltip
visible
title={title}
getPopupContainer={(triggerNode) => triggerNode}>
{children}
</Styled.Tooltip>
);
import styled from 'styled-components';
import { Tooltip as TooltipAnt } from 'antd';
export const Tooltip = styled(TooltipAnt)`
.ant-tooltip-content {
position: relative;
overflow-x: hidden;
overflow-y: visible;
padding-bottom: 20px;
display: inline-block;
left: -35px;
top: 25px;
}
.ant-tooltip-arrow {
display: none;
}
.ant-tooltip-inner {
padding: 10px 15px;
background: white;
display: inline-block;
border-radius: 10px;
border: 3px solid #D04A02;
border-bottom-right-radius: 0;
z-index: 2;
max-width: 200px;
color: #000;
box-shadow: none;
}
.ant-tooltip-content:before {
content: '';
position: absolute;
width: 25px;
height: 25px;
background: white;
bottom: 14px;
right: -8px;
transform: rotate(25deg);
border-bottom: 3px solid #D04A02;
}
.ant-tooltip-content:after {
content: '';
width: 3px;
background: #D04A02;
height: 50%;
position: absolute;
right: -0.5px;
bottom: 12px;
}
`;
And component where I would like to call this Tooltip:
import { CustomTooltip } from 'components/Tooltip/Tooltip';
export const SomeComponent = () => {
return (
<div>
<CustomTooltip title="Home">
<p>Home</p>
</CustomTooltip>
</div>
);
};
The problem is, the tooltip is not above the children. How can I fix this?
Codesanbox: https://codesandbox.io/s/stupefied-cohen-sgxr3s?file=/src/App.tsx