How to prevent the page scrolling to top when modal is opened?

Question

How to prevent the scrolling of page when modal is opening? I am trying to open modal and page scrolls to top. But I need the modal open on same position and do not scroll the page.

I am using MDB and on their page the modals are opened on same position....

import React, { useState } from 'react'
import {
    //   modal

    MDBModal,
    MDBModalDialog,
    MDBModalContent,
    MDBModalBody,
} from 'mdb-react-ui-kit';


const CarouselModal = ({ carouselModal, setCarouselModal }) => {

    return (
        <div>
            <MDBModal overflowScroll={false} show={carouselModal} setShow={setCarouselModal} tabIndex='-1'>
                <MDBModalDialog size='xl'>
                    <MDBModalContent>
                        <MDBModalBody>
                            <div style={{ color: 'black', textAlign: 'center' }}>
                                <p>some text</p>
                                <p></p>
                                <p>some text</p>
                                <p></p>
                                <p>some text</p>
                                <p></p>
                                <p>some text</p>
                            </div>
                        </MDBModalBody>
                    </MDBModalContent>
                </MDBModalDialog>
            </MDBModal>
        </div>
    )
}

export default CarouselModal

This is the modal. Which should open on the middle of the page....

import React, { useState } from 'react';
import {
    MDBCarouselItem,
} from 'mdb-react-ui-kit';
import CarouselModal from '../CarouselModal/CarouselModal';

const CarouselTextComponents = ({ props, key }) => {
    const [carouselModal, setCarouselModal] = useState(false);

    const toggleShowCarouselModal = () => {setCarouselModal(!carouselModal);}
    return (
        <div style={{ position: 'relative' }}>
            <MDBCarouselItem
                className='w-100 d-block'
                itemId={props.itemId}
                src={props.backImage}
                alt='...'
            >
                <div>
                    <h5>{props.header}</h5>

                    <h2>{props.title}</h2>
                    <div>
                        <p>{props.descr}</p>
                    </div>

                    <div className="row">
                        {
                            props.images.map(image => {
                                return <div className='col-md-3' style={{ width: '30px', height: '30px', backgroundImage: `url(${image})`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }}>
                                </div>
                            })
                        }


                    </div>
                    <p>Live TV plan required. Regional restrictions, blackouts and additional terms apply. <a href="#" onClick={toggleShowCarouselModal }>See details</a></p>
                </div>
            </MDBCarouselItem>


            <div style={{ position: 'realtive' }}>
                <CarouselModal carouselModal={carouselModal} setCarouselModal={setCarouselModal} />
            </div>

        </div>
    )
}

export default CarouselTextComponents

This is the component which the modal should open from.

I have about 5 components before this one. but when I try to call the modal, the page is scrolling on top.

What I am doing wrong? How I can make the modal open on the same position of the page? Is it better to make a custom modal instead this one from MDB?