SwiperJS Element in Gutenberg (ReactJS loading)

[chachaadmin]

I developped a way to load dynamic stuffs in Gutenberg. Mainly, It is ReactJS. Everything was working for one slider but when I add more then one, I had problem. So, I updated from 11.0.2 to 11.0.7. The problem is with custom navigation and pagination. I added Ref but nothing. I have a weird problem.

return ( <div {...attrs2} > <div className={swiper-button-prev metablocks-prev-button slider-button-prev-${attributes.sectionId}} ref={prevElRef} > {Object.keys(attributes?.navigation?.normal).length > 0 && <img className="normal" src={attributes?.navigation?.normal?.sizes?.full?.url} /> } {Object.keys(attributes?.navigation?.hover).length > 0 && <img className="hover" src={attributes?.navigation?.hover?.sizes?.full?.url} /> } </div> <div className={metablocks-pagination slider-pagination-${attributes.sectionId}} ref={paginationElRef} /> <div className={swiper-button-next metablocks-next-button slider-button-next-${attributes.sectionId}} ref={nextElRef} > {Object.keys(attributes?.navigation?.normal).length > 0 && <img className="normal" src={attributes?.navigation?.normal?.sizes?.full?.url} /> } {Object.keys(attributes?.navigation?.hover).length > 0 && <img className="hover" src={attributes?.navigation?.hover?.sizes?.full?.url} /> } </div> </div> );
if (attributes?.navigation?.show && Object.keys(attributes?.navigation?.normal).length > 0) {

params.navigation = {
    nextEl: nextElRef.current,
    prevEl: prevElRef.current
};

if (attributes?.pagination?.show && attributes?.navigation?.position == 'navigation-with-pagination') {
    params.pagination = {
        el: paginationElRef.current
    };
}

}
`

Object.assign(swiperElRef.current, params); swiperElRef.current.initialize();