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?

Start with the custom handle shown in the issue and its always-visible rc-tooltip wrapping rc-slider's Handle. Reproduce the initial render and the position change after clicking the handle; done means the tooltip is correctly positioned before any interaction and remains correct after interaction.