react-bootstrap on Google Chrome : the horizontal scrollbar of my div shifts a little to the left when it is on the far right when I close my modal

Has someone already had this problem? Do I have to change the library for the modals?
I just want my horizontal scrollbar in my div to stay on the right when I close my modal. However, the scrollbar shifts a little to the left. This problem only happens on Google Chrome

              <div style={{ overflowY: 'auto', overflowX: 'hidden', padding: '14px' }}>
{residents.map((x, i) => {
return (
<div key={i}>
<div key={i} className="box">
<Row>
<div className="add-residents-delete-inputs">
{residents.length !== 1 &&
<Button variant="danger" onClick={() => handleRemoveClick(i)}>x</Button>}
</div>
<Col
style={{
marginLeft: '30px'
}}>
<Form.Group controlId="validationCustom01">
<InputGroup style={{ width: 'fit-content' }} hasValidation>
<Form.Control
required
className="ml10"
name="lastname"
placeholder="Nom *"
value={x.lastname}
onChange={e => handleInputChange(e, i)} />
<Form.Control.Feedback type="invalid">
<small> {error} </small>
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Col>
<Col
style={{
marginLeft: '46px'
}}>
<Form.Group controlId="validationCustom02">
<InputGroup style={{ width: 'fit-content' }} hasValidation>
<Form.Control
required
name="firstname"
placeholder="Prénom *"
value={x.firstname}
onChange={e => handleInputChange(e, i)} />
<Form.Control.Feedback type="invalid">
<small> {error} </small>
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Col>
<Col
style={{
marginLeft: '45px'
}}>
<FormGroup controlId="validationCustom03">
<Form.Select
required
name="gender"
placeholder="Genre"
value={x.gender}
style={{ backgroundColor: "#5CB2C4", color: "white" }}
onChange={e => handleInputChange(e, i)}>
<option value="M">Homme</option>
<option value="F">Femme</option>
</Form.Select>
</FormGroup>
</Col>
<Col
style={{
marginLeft: '46px'
}}>
<FormGroup controlId="validationCustom04">
<Form.Select
name="texture"
placeholder="Texture"
defaultValue={x.texture}
onChange={e => handleInputChange(e, i)}>
<option value="">Entier</option>
<option value="chopped">Haché</option>
<option value="mixed">Mixé</option>
</Form.Select>
</FormGroup>
</Col>
<Col
style={{
marginLeft: '42px'
}}>
<FormGroup controlId="validationCustom05">
<Form.Control
required
name="diet"
placeholder="Protocole Alimentaire"
style={{ backgroundColor: "white", color: "black" }}
// We can also use defaultValue ={residentInputValue[i].profil} for example.
defaultValue={x.diet}
onChange={e => handleInputChange(e, i)} />
</FormGroup>
</Col>
<Col
style={{
marginLeft: '46px'
}}>
<Form.Group controlId="validationCustom02">
<InputGroup style={{ width: 'fit-content' }} hasValidation>
<Form.Control
style={{ backgroundColor: 'white', color: 'black' }}
name="residence_location"
placeholder="Service"
value={x.residence_location}
onChange={e => handleInputChange(e, i)} />
</InputGroup>
</Form.Group>
</Col>
<Col
style={{
marginLeft: '102px'
}}>
<FormGroup controlId="validationCustom06">
<Button value={x.aversions.map(aversions => aversions.name)} id={i} variant="success"
onChange={e => handleInputChange(e, i)}
onClick={e => handleOpen(e, i)}>+</Button>
<p>
{residents[i].aversions.map((aversion, index) => {
return (
<span key={index}>
{index === residents[i].aversions.length - 1
? aversion.name + ' (' + aversion.type + ')' : aversion.name +
' (' + aversion.type + ')' + ', '}
</span>
);
})
}
</p>
</FormGroup>
</Col>
</Row>
</div>
<ReusableModal sectionRef={sectionRef} btnRef={btnRef} show={showModal} onClose={onClose}
name="aversions"
handleSave={e => handleSave(e, i)} title="Ajout/suppression d'aversions">
<AddAversions sectionRef={sectionRef} aversions={aversions} isCheckedList={isCheckedList}
aversionsList={aversionsList}
onAversionsChange={onAversionsChange} onTypeChange={onTypeChange} residents={residents} />
</ReusableModal>
</div>

ReusableModal :

  return (
<Modal keyboard centered backdrop={false} show={props.show} onHide={handleClose} style={{position: 'fixed'}}>
<Modal.Header closeButton>
<Modal.Title>{props.title}</Modal.Title>
</Modal.Header>
<Modal.Body>{props.children}</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Annuler
</Button>
<Button ref={btnRef} variant="primary" onClick={props.handleSave}>
Sauvegarder
</Button>
</Modal.Footer>
</Modal>
);

what I expect is to keep the position of the horizontal scrollbar of my center div all the way to the right when I close the modal

Solved. I just had to move my Modal component under my .map(). Not inside.