Always-visible tooltip positioned incorrectly until I click handle

I have my tooltip set to show at all times. When my component first renders, the tooltip sits right on top of the handle. When you click the handle it jumps up to its correct position.

My related code:

import Slider from 'rc-slider'
import Tooltip from 'rc-tooltip'

Custom handle:

const handle = props => {
    const {
        value,
        dragging,
        index,
        ...restProps
    } = props

    const overlay = severityLevels[Object.keys(severityLevels)[value - 1]].label

    return (
        <Tooltip
            visible
            key={ index }
            overlay={ overlay }
            placement="top"
            prefixCls="rc-slider-tooltip"
        >
            <>
                <Handle value={ value } { ...restProps } />
            </>
        </Tooltip>
    )
}

The component:

export function ThreatLevel({
    className,
    value,
    max,
    min,
    onUpdate,
    step,
    ...props
}) {
    const [color, setColor] = useState(getColor(value))

    const onChange = val => {
        const idToLevel = findKey(severityLevels, level => level.id === val)
        setColor(getColor(idToLevel))
        onUpdate(val)
    }

    const severityID = severityLevels[value].id

    return (
        <Slider
            { ...props }
            defaultVisible
            visible
            className={ className }
            defaultValue={ severityID }
            handle={ handle }
            handleStyle={ [
                { backgroundColor: color },
            ] }
            max={ max }
            min={ min }
            onChange={ onChange }
            step={ step }
        />
    )
}

And lastly, the CSS:

.rc-slider {
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    height: 14px;
    margin: 0 8%;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-touch-action: none;
    touch-action: none;
    z-index: 2000;
}

.rc-slider * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rc-slider-rail {
    background-color: rgb(240, 242, 242);
    flex: 1;
    height: 7px;
}

.rc-slider-rail::before,
.rc-slider-rail::after {
    background-color: rgb(240, 242, 242);
    bottom: 0;
    content: "";
    height: 7px;
    position: absolute;
    top: 0;
    width: 10%;
}

.rc-slider-rail::before {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    right: 100%;
}

.rc-slider-rail::after {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    left: 100%;
}

.rc-slider-track {
    position: absolute;
    left: 0;
    height: 0;
}

.rc-slider-handle {
    background-color: rgb(255, 137, 73);
    position: absolute;
    width: 20%;
    height: 7px;
    cursor: grab;
    cursor: -webkit-grab;
    border-radius: 7px;
    -ms-touch-action: pan-x;
    touch-action: pan-x;
}

.rc-slider-handle:focus {
    border-color: #57c5f7;
    outline: none;
}

.rc-slider-handle-click-focused:focus {
    border-color: #96dbfa;
    box-shadow: unset;
}

.rc-slider-handle:hover {
    border-color: #57c5f7;
}

.rc-slider-handle:active {
    border-color: #57c5f7;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.rc-slider-mark {
    position: absolute;
    top: 18px;
    left: 0;
    width: 100%;
    font-size: 12px;
}

.rc-slider-mark-text {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    color: #999;
}

.rc-slider-mark-text-active {
    color: #666;
}

.rc-slider-step {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
}

.rc-slider-dot {
    position: absolute;
    bottom: -2px;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    border: 2px solid #e9e9e9;
    background-color: #fff;
    cursor: pointer;
    border-radius: 50%;
    vertical-align: middle;
}

.rc-slider-dot-active {
    border-color: #96dbfa;
}

.rc-slider-dot-reverse {
    margin-left: 0;
    margin-right: -4px;
}

.rc-slider-disabled {
    background-color: #e9e9e9;
}

.rc-slider-disabled .rc-slider-track {
    background-color: #ccc;
}

.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
    border-color: #ccc;
    box-shadow: none;
    background-color: #fff;
    cursor: not-allowed;
}

.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
    cursor: not-allowed !important;
}

.rc-slider-vertical {
    width: 14px;
    height: 100%;
    padding: 0 5px;
}

.rc-slider-vertical .rc-slider-rail {
    height: 100%;
    width: 4px;
}

.rc-slider-vertical .rc-slider-track {
    left: 5px;
    bottom: 0;
    width: 4px;
}

.rc-slider-vertical .rc-slider-handle {
    margin-left: -5px;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

.rc-slider-vertical .rc-slider-mark {
    top: 0;
    left: 18px;
    height: 100%;
}

.rc-slider-vertical .rc-slider-step {
    height: 100%;
    width: 4px;
}

.rc-slider-vertical .rc-slider-dot {
    left: 2px;
    margin-bottom: -4px;
}

.rc-slider-vertical .rc-slider-dot:first-child {
    margin-bottom: -4px;
}

.rc-slider-vertical .rc-slider-dot:last-child {
    margin-bottom: -4px;
}

.rc-slider-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    visibility: visible;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    z-index: 2000;
}

.rc-slider-tooltip-inner {
    color: rgb(136, 134, 134);
    font-family: 'Proxima Nova Bold';
    font-size: 14px;
    height: 24px;
    line-height: 1;
    min-width: 24px;
    padding: 0;
    pointer-events: none;
    text-align: center;
    text-decoration: none;
}

Any ideas what might be going on?

react-component / slider

Always-visible tooltip positioned incorrectly until I click handle #598