Draggable Div created at the wrong place when using flexbox

[Placeblock]

Please use this template to help contributors get a detailed description of the issue or feature.

For support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

1. Apply either the bug or feature-request label

Select appropriate label in right sidebar...

2. Describe the bug or feature

i created a structure like described further down, and if i click on a draggable, the moving div isnt created exactly on the clicked div, its a bit further up...

I noticed that if i remove that align-items: center; at lists-container, the container sticks to the top and everything works finde...

3. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

HTML:

<div id="lists-container">
    <div className="list-container">
        <p>Lernlisten</p>
        <ul id="selection" className="draggable-container">
            <li className="draggable not-draggable">Lesson 1</li>
            <li className="draggable not-draggable">Lesson 2</li>
            <li className="draggable not-draggable">Lesson 3</li>
            <li className="draggable not-draggable">Lesson 4</li>
            <li className="draggable not-draggable">Lesson 5</li>
        </ul>
    </div>
    <div className="list-container">
        <p>Lektionen</p>
        <ul id="lessonlist" className="draggable-container">
            <li className="draggable">Lesson 1</li>
            <li className="draggable">Lesson 2</li>
            <li className="draggable">Lesson 3</li>
            <li className="draggable">Lesson 4</li>
            <li className="draggable">Lesson 5</li>
        </ul>
    </div>
</div>

CSS:

#lists-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.list-container p {
    color: white;
    font-size: 25px;
}

ul {
    border: 3px solid var(--first-color);
    border-radius: 30px;
    padding: 0px;
    margin: 0px;
}

li {
    list-style: none;
    width: 300px;
    height: 50px;
    border-radius: 20px;
    border: 3px solid var(--second-color);
    margin: 10px;
    padding: 10px;
    color: white;
    transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

4. Please tell us about your environment:

• Library version: [1.0.0-beta.X | v1 stable | etc...]
• Browsers: [Firefox]
• Tech stack: [React]

[zjffun]

I tried the above code https://codepen.io/1010543618/pen/QWgmeqO , but can't reproduce in both Firefox and Chrome.

[Placeblock]

I did the same in just plain javascript and it works. i think it has something to do with react