Меню действий некорректно отображается

Как сделать вот такое меню действий, и чтобы оно корректно открывалось возле каждого пользователя? Сейчас делаю вот так:

<div className={style.main}>
    <ul>
        {props.items.map(function (value, key) {
            return <li>
                <p onClick={(e) => {
                    value.callback(value.data)
                }
                } className={style.context_title}>{value.name}</p>
            </li>
        })}
    </ul>
</div>

CSS

.main {
    background-color: #1e1e1e;
    right: 40px;
    top: 150px;
    position: absolute;
    border-radius: 5px;
    padding: 2px;
}

Но когда возле пользователя нажать, то оно появляется всегда в одном месте