Is it possible to get modal sticked to header in react-table?

Question

I am using react-table v6.

I have a header as an eye-icon. After click on that icon I want to show the modal. How can I stick the modal to always appear below this icon even if I resize the window OR at least on different browsers and screens?

Of course there are some values like left and right - MAYBE I should use approx. values to display modal near this eye-icon?

Before

After I resized - modal went up

My code for column and modal - I put modal after the icon

const eyeColumn = [{
    Header: () =>
        <div>
            <div className="eye-icon" onClick={handleModalShow}>
                <img src={eyeIcon}/>
            </div>
            <Modal onHide={() => {
                setShowModal(false)
            }} show={showModal}
            />
        </div>,
    fixed: "left",
    sortable: false,
    headerClassName: table-header-class",
    className: "table-row-class",
    width: 70
}];

Answer 1

reactjs-popup did the trick. Everything is ok