`Cannot convert undefined or null to object` when using `Thumbs` module

Check that this is really a bug

• I confirm

Reproduction link

https://github.com/bnn1/swiper-issue

Bug description

When creating component from example in React app, app throws runtime error TypeError: Cannot convert undefined or null to object.

Reproduction link contains next.js app but it is possible to reproduce with pure react bootstrapped with CRA

Steps to reproduce:

1. Create react app yarn create react-app
2. Install swiper
3. Create component Carousel and add the following code

code

import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Thumbs } from "swiper";
import "swiper/css";

export const Component = () => {
  // store thumbs swiper instance
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <main>
      {/* Main Swiper -> pass thumbs swiper instance */}
      <h1>hello</h1>
      <Swiper modules={[Thumbs]} thumbs={{ swiper: thumbsSwiper || null }}>
        <SwiperSlide>1</SwiperSlide>
        <SwiperSlide>2</SwiperSlide>
        <SwiperSlide>3</SwiperSlide>
        <SwiperSlide>4</SwiperSlide>
        <SwiperSlide>5</SwiperSlide>
      </Swiper>

      {/* Thumbs Swiper -> store swiper instance */}
      {/* It is also required to set watchSlidesProgress prop */}
      <Swiper modules={[Thumbs]} watchSlidesProgress onSwiper={setThumbsSwiper}>
        {/* ... */}        <SwiperSlide>1</SwiperSlide>
        <SwiperSlide>2</SwiperSlide>
        <SwiperSlide>3</SwiperSlide>
        <SwiperSlide>4</SwiperSlide>
        <SwiperSlide>5</SwiperSlide>

      </Swiper>
    </main>
  );
};

4. Use `Component` inside `App.js` file

import { Component } from './Component';

function App() {
  return (
    <div className="App">
      <Component />
    </div>
  );
}

export default App;

1. Run application yarn start
2. Navigate to localhost:3000
3. Open dev tools

Expected Behavior

No errors occur during runtime

Actual Behavior

Errors occur during runtime

Swiper version

8.1.0

Platform/Target and Browser Versions

Linux (arch), Chrome Version 100.0.4896.88 (Official Build) (64-bit)

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

[MaksimAmelchenko]

the workaround is thumbs={{ swiper: thumbsSwiper }} replace to thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}

[linkb15]

I am facing with this issue as well with Nextjs 12 + React 18