Z-index does not works

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Tooltip } from "antd";
import styled from "styled-components";

export const Tool = ({ children, title, left, top }) => (
  <Custom
    visible
    left={left}
    top={top}
    title={title}
    getPopupContainer={(triggerNode) => triggerNode}
  >
    <Children>{children}</Children>
  </Custom>
);

const Children = styled.div`
  position: relative;
  display: inline;
  > * {
    position: relative;
    display: inline;
  }
`;

const Custom = styled(Tooltip)`
  .ant-tooltip-arrow {
    display: none;
  }

  .ant-tooltip {
    left: ${(props) => props.left || 0} !important;
    top: ${(props) => props.top || "-70px"} !important;
  }

  .ant-tooltip-content {
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 20px;
    display: inline-block;
  }

  .ant-tooltip-inner {
    padding: 10px 15px;
    background: white;
    top: 0;
    display: inline-block;
    border-radius: 10px;
    border: 3px solid red;
    border-bottom-right-radius: 0px;
    z-index: 2;
    max-width: 200px;
    box-shadow: none;
    color: black;
    word-wrap: break-word;
  }

  .ant-tooltip-content:before {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    background: white;
    bottom: 14px;
    right: -6px;
    transform: rotate(25deg);
    border-bottom: 3px solid red;
  }

  .ant-tooltip-content:after {
    content: "";
    width: 3px;
    background: red;
    height: 50%;
    position: absolute;
    right: 0;
    bottom: 13px;
  }
`;

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Tool } from "./Tooltip";

const App = () => {
  return (
    <Tool title="Tooltip">
      <p>Button</p>
    </Tool>
  );
};

export default App;