ReactJS стилизованный компонент (всплывающая подсказка) отображается в неправильном положении

Question

Я работаю в Интернете над тегами текстовых данных. Когда я что-то перетаскивал (слово), я хочу, чтобы всплывающая подсказка появлялась прямо под перетаскиваемым текстом. но он показывает неправильное положение. всплывающая подсказка отображается в неправильном положении

Я использую компонент редактора тегов с antd вот так.

{
    title: 'Sentence',
    dataIndex: 'sentence',
    key: 'sentence',

render: (text, record, index) => (
    // text === record.sentence
    <div onClick = {onClick}>
        <TagEditor value={text} tags={tags} onChange={onChange}/>
    </div>

    )
}

и вот функция моего компонента редактора тегов, которая позиционирует всплывающую подсказку .

function onSelectText(event) {
    const clientRects = window.getSelection().getRangeAt(0).getClientRects()[0];

    if (clientRects) {
        setTooltipPosition({ x: (clientRects.left + clientRects.right) / 2, y: clientRects.bottom })

        const parentNode = window.getSelection().getRangeAt(0).startContainer.parentNode;
        const tagIndex = tags.findIndex(tag => tag.name === parentNode.id);

        if (tagIndex > -1) {
            const newTags = tags.map((tag, index) => index === tagIndex ? { ...tag, checked: true } : { ...tag, checked: false });
            setTags(newTags);
        } else {
            const newTags = tags.map(tag => {
                tag.checked = false;
                return tag;
            });

            setTags(newTags);
        }

        const selectText = window.getSelection().toString();

        if (selectText.length > 0) {
            setShowTooltip(true);
        } else {
            setShowTooltip(false);
        }
    }
};

Позиция (x, y) всплывающих подсказок отображается так, как я задумал в chrome devtools, но показывает неправильную позицию ..

Буду признателен, если кто-нибудь может помочь.