custom coupling swiper to slides dont work

[wibed]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/gifted-paper-uy25g?file=/src/App.js

Bug description

i have tried to manually couple the swiper element with its slides, trying to work around
the issue arised in #5310

i am having some difficulties on how to set it up correctly.
if i use the swiper layout as described in the documentation

<div className="swiper customSwiper"> ...

i dont get to slide at all

if i use the swiper element import { Swiper, SwiperSlide } from 'swiper/react'
sliding works, but initializing the swiper object onto the existing dom element
does show the array of children but does not act upon interacting with the interface.
(ex activeindex does not update)

how could i work around this so i can prevent the initial issue (update exceeds error) and interact with the swiper element
programatically?

Expected Behavior

to interact with a custom initialized swiper element programatically

Actual Behavior

visually works. programatically does not

Swiper version

7.3.4

Platform/Target and Browser Versions

any browser/platform, tested in safari and firefox

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[wibed]

i have noticed there is a similar issue
#3855

[wibed]

@nolimits4web
could you add the ref attribute back in?

i have managed to work around it but the swiper component does not allow a ref as an attribute.
here is my workaround
https://codesandbox.io/s/icy-darkness-m4c83?file=/src/App.tsx

[wibed]

out of curiosity. why not using ref in the first place? updating state seems odd. because ref is consistent. while state
does cause a rerender.

[wibed]

i have worked around it by using

const Rwiper: React.FunctionComponent<SwiperProps & RefAttributes<any>> = Swiper

<Rwiper ref={...}>
...
</Rwiper>