Close modal using bootstrap CDNs and react

I'm using bootstrap V5 linked to my index.html with CDN links, i want to add bootstrap modal to my react project (inside the return() of my component) like this:

<div className="modal fade" id="modalEditarIntegrante" tabIndex="-1" aria-labelledby="modalEditarIntegrante" aria-hidden="true">
            <div className="modal-dialog">
                <div className="modal-content">
                <div className="modal-header">
                    <h5 className="modal-title">Editar Integrante</h5>
                    <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div className="modal-body">
                    <form onSubmit={editarIntegrante}>
                        <div className="row mb-3 justify-content-between">
                            <div className="col-md-5">
                                <label htmlFor="nombreIntegranteEditar">Nombre</label>
                                <input type="text" id="nombreEditarIntegrante" className="form-control" 
                                value={nombreIntegranteEditar} onChange={(e)=>setNombreIntegranteEditar(e.target.value)}/>
                            </div>
                            <div className="col-md-6">
                                <label htmlFor="apellidoIntegranteEditar">Apellido</label>
                                <input type="text" id="apellidoEditarIntegrante" className="form-control" 
                                value={apellidoIntegranteEditar} onChange={(e)=>setApellidoIntegranteEditar(e.target.value)}/>
                            </div>
                        </div>
                        <div className="row mb-3 justify-content-between">
                            <div className="col-md-7">
                                <label htmlFor="nickIntegranteEditar">Nick</label>
                                <input type="text" id="nickEditarIntegrante" className="form-control"
                                 value={nickIntegranteEditar} onChange={(e)=>setNickIntegranteEditar(e.target.value)}/>
                            </div>
                            <div className="col-md-4">
                                <label htmlFor="edadIntegranteEditar">Edad</label>
                                <input type="number" id="edadEditarIntegrante" className="form-control"
                                 value={edadIntegranteEditar} onChange={(e)=>setEdadIntegranteEditar(e.target.value)}/>
                            </div>
                        </div>
                        <label htmlFor="juegoFavIntegranteEditar">Juego Fav</label>
                        <input type="text" id="juegoFavIntegranteEditar" className="form-control w-" 
                        value={juegoFavIntegranteEditar} onChange={(e)=>setJuegoFavIntegranteEditar(e.target.value)}/>
                        
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" className="btn btn-primary">Save changes</button>
                        </div>
                    </form>
                    
                </div>
                    
                </div>
                
            </div>
        </div>

And after submit event, i want to be able to close the modal with id= 'modalEditarIntegrante'

So after the function submited "editarIntegrante" i want to close the modal

const editarIntegrante = async (e)=>{
    e.preventDefault();
    await fetch(`${URI}editarIntegrante`,{
        method:'POST',
        headers:{
            'content-type':'application/json'
        },
        body: JSON.stringify({
            'idIntegranteEditar': idIntegranteEditar,
            'nombreIntegrante': nombreIntegranteEditar,
            'apellidoIntegrante':apellidoIntegranteEditar,
            'nickIntegrante':nickIntegranteEditar,
            'desIntegrante':desIntegranteEditar,
            'edadIntegrante': edadIntegranteEditar,
            'juegoFavIntegrante': juegoFavIntegranteEditar,
            'imgIntegrante':imgIntegranteEditar
        })
    }).then(res=>res.json()).then(data=>{
        obtenerIntegrantes();
        let modal = document.getElementById('modalEditarIntegrante') 
        modal.hide();
        
    })
}