I am trying to create a modal in React, but running into some problems.

Suppose I have the following structure:

React structure

<ComponentUsingModal>
    <Left>  
        <ButtonToActivateModal>
            ...
        </ButtonToActivateModal>
        <ModalComponent>
            ...
        </ModalComponent>
    </Left>
    <Right>
        ...
    </Right>
</ComponentUsingModal>

Code for modal

<div className='modal'>
    <div className='modal-content'>
    </div>
</div>

CSS

.modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 2;
}

.modal-content {
    color: white;
    width: 313px;
    height: 332px;
    background-color: red;
}

Note: For the button, I am using the useState and useEffect hook to update a truthy value within the modal component to render it to the screen.

Here, the modal is centred. Now suppose that the centre content is split into two pieces such that there is a left and right side.

The goal is the have the modal positioned on the left side.

Using JavaScript, I was able to reposition the modal to the left side when the modal is rendered to the screen. However, since the modal was initially positioned at the centre, so you can visually see the modal moving from the centre to the left side (albeit rather quickly). It doesn't matter where the modal is initially positioned, there will be that janky movement. I thought about making all the colours transparent and pass the styling within the React component, but that seems too hack-y for my liking.

What other alternatives are there?

Note: I want the modal to be fixed in the same position regardless of the width and height of the screen.