How to prevent duplicate Modal Popup & not scrolling to last element in ReactJS

Question

I'm creating a Project where I fetch data from server & render 10 data in 10 different Bootstrap card using map(). Each card have a button to popup a Modal. Beside I set a Link to button that will show me route of that data.

Information

• Using react-bootstrap for modal with hooks
• Using react-router-dom for show route
• Using useState hooks to set data from fetched data to modal.
• All of code are in one component.
• info_prop & info are different but it works with same data.
• I have import all needed things & don't have any warning or error
• About Data Handling
  • First I get data with useGetDataQuery() using chapterId.
  • Map data & destructure info data & set to state with setInfo
  • Send to Modal props with info
  • Handle of sending to setInfo with handleModal. I also try without this function. That time I do it on onClick.

Problem

• Route Problem with map()
  • I use a Button to show Modal & Wrapped the button with Link. Every Link has a uniqe ID like 1:1, 1:2, 1:3...1:10. If I click on 1:1 button it show me the content of 1:1. But when I close the modal the route auto change 1:1 to 1:3...1:10.
  • I can realize that there it's render a duplicate Modal behind main Modal. I can see only 3-4 lines of back modal.
• Modal Problem
  • When I show 1-5 data with map & click button of popup modal, modal show normally with blur background.
  • When I dhow 1-10 data with map & click button of popup modal, background become pure black.(I think it's not normal)

Dependencies

• react-bootstrap v5
• bootstrap v5
• react-router-dom v6

Code

• Code of component. Modal in same component but in another function.

function TafsirModal(props) {
    return (
        <Modal
            {...props}
            size="md"
            aria-labelledby="contained-modal-title-vcenter"
            centered
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Heading
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <div>
                    {props.info}
                </div>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide}>Close</Button>
            </Modal.Footer>
        </Modal>
    )
}

const InfoCom = () => {
    const { chapterId } = useParams()

    let [modalShow, setModalShow] = useState(false);
    let [info, setInfo] = useState('')
    const { data } = useGetDataQuery(chapterId)


    const handleModal = (info_prop) => {
        setInfo(info_prop)
        setModalShow(true)
    }

    return (
        <>
            <div className="container">
                <div className="row">
                    <div className="col-md-12">
                        {data.map(res => (
                            <Link to={`/li/${chapterId}/${res.res_key}`} key={res.res_key} >
                                <div key={res.id} className='card my-2'>
                                    <div className="card-body">
                                        <div className="d-flex flex-row">
                                            <Button onClick={() => handleModal(res.info[0].text)}>
                                                Get Info
                                            </Button>

                                            <TafsirModal
                                                show={modalShow}
                                                onHide={() => setModalShow(false)}
                                                info={info}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </div>
        </>
    )
}
export default InfoCom