im have next.js version 15 app i need add Thumbs gallery in one page i try this : thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null but always give me error : TypeError: Cannot convert undefined or null to object

simple demo code :

this is my project-detail-thumbs-slider.tsx:

"use client";

import Slider from "@/components/ui/slider";
import Image from "next/image";
import { useState } from "react";
import Swiper from "swiper";
import { FreeMode, Thumbs } from "swiper/modules";

export default function ProjectDetailThumbsSlider() {
  const [thumbsSwiper, setThumbsSwiper] = useState<Swiper | null>(null);

  return (
    <div className="w-full h-full flex flex-col gap-2 rounded-xl">
      <Slider
        childKey="thumbs"
        props={{
          modules: [FreeMode, Thumbs],
          thumbs: {
            swiper:
              thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
          },
          className: "w-full h-3/4 rounded-t-xl",
        }}
      >
        {Array(10)
          .fill(0)
          .map((item, index) => (
            <Image
              className="object-cover"
              key={index}
              fill
              src={`${index + 1}.jpg`}
              alt="nature"
            />
          ))}
      </Slider>
      <Slider
        childKey="gallery"
        props={{
          onSwiper: (swiper) => {
            console.log("LINE 45  onSwiper: ", swiper);
            setThumbsSwiper(swiper);
          },
          slidesPerView: 4,
          freeMode: true,
          watchSlidesProgress: true,
          modules: [FreeMode, Thumbs],
          className: "w-full h-1/4 rounded-b-xl",
          spaceBetween: 5,
        }}
      >
        {Array(10)
          .fill(0)
          .map((item, index) => (
            <Image
              className="object-cover"
              key={index}
              fill
              src={`${index + 1}.jpg`}
              alt="nature"
            />
          ))}
      </Slider>
    </div>
  );
}

this is slider:

"use client";
import React from "react";
import { Swiper, SwiperProps, SwiperSlide } from "swiper/react";
import { A11y, Autoplay, Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import { useTheme } from "@/hooks/useTheme";

function Slider({
  children,
  props = {}, // Default to an empty object
  childKey,
}: {
  children: React.ReactNode;
  props?: SwiperProps;
  childKey: string;
}) {
  const { state } = useTheme();

  return (
    <Swiper
      key={`${state.dir} ${childKey}`}
      dir={state.dir}
      modules={[
        Autoplay,
        A11y,
        Navigation,
        Pagination,
        ...(props.modules || []),
      ]}
      {...props}
    >
      {React.Children.map(children, (child, index) => (
        <SwiperSlide key={index}>{child}</SwiperSlide>
      ))}
    </Swiper>
  );
}

export default Slider;

im give this error : TypeError: Cannot convert undefined or null to object when change my direction i have two more slider but other slider work without error just this slider because have thumbs or two swiper in one file with same key why i use same key ? because direction in swiper just work with key key = "rtl" im try childKey props key = `${state.dir} ${childKey}` but nothing change

how Thumbs gallery work ? when dont change dir or remove key from Slider component key or remove thumbs in project-detail-thumbs-slider.tsx or remove onSwiper action on project-detail-thumbs-slider.tsx