Swiper/React Custom navigation buttons are not properly enabled/disabled

[alicerocheman]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/autumn-monad-b6o1xq?file=/src/Slider.js:3272-3280

Bug description

ON OUR APP 1a. We have a slider, whose content is changed by user click. 1b. Our slider component wraps each child in a SwiperSlide (necessary for code factorisation, since calling SwiperSlide from a child components breaks Swiper) 2. At first load (4 slides / 4 slidesPerView) the nav buttons are disabled. (works properly) 3. When the user clicks, loading turns true, child of swiper is a div with a loader, buttons are forced disabled. (works properly) 4. Once data arrives (4 slides / 4 slidesPerView), both buttons become enabled when they should both stay disabled. (bug)

ON CODESANDBOX We tried to reproduce on codesandbox, as close to our real code as possible. The items array is stored in a state, which is changed by user click. At first load as well as later when data is updated, both nav buttons are enabled (bug) issue persist even when loading behavior (with btns forced disabled) is removed (see code)

Expected Behavior

With 4 slides passed and 4 slidesPerView, both navigation buttons should be disabled

Actual Behavior

With 4 slides passed and 4 slidesPerView, both navigation buttons are enabled

Swiper version

8.0.7

Platform/Target and Browser Versions

MacOs 12.3.1 - Chrome Version 100.0.4896.60 (Official Build) (x86_64)

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] 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