React-multi-carousel is not correctly refreshing, when the input-data changes

i am building my first fullstack MERN-App and have a “little” problem with the react-multi-carousel package.

Here is a screenshot how the front-side is looking (its a diary section, where you can see all diaries of the selected month (the selected one and the month before)):

Here is my Code: from the Diary-Container-Component (this is where the problem appears and the carousel is used)

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import Wrapper from "../assets/wrappers/DiaryContainer.js";
import { useSelector } from "react-redux";
import { SingleDiaryEntryDisplay, Loading } from "../components";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import { useGetAllDiaryQuery } from "../features/api/apiSlice.js";

//carousel
const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 3000 },
    items: 5,
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
};

const DiaryContainer = ({ lastMonth }) => {
  let { searchValuesDiary } = useSelector((store) => store.allDiary);
  let [localSearchValuesDiary, setLocalSearchValuesDiary] =
    useState(searchValuesDiary);

  // for lastMonth

  const {
    data: diaries,
    refetch,
    isLoading,
    isSuccess,
    isFetching,
    isError,
    error,
  } = useGetAllDiaryQuery(localSearchValuesDiary);

  useEffect(() => {
    setLocalSearchValuesDiary({ ...searchValuesDiary });
    if (lastMonth) {
      setLocalSearchValuesDiary({ ...searchValuesDiary, month: lastMonth });
    }
    refetch();
  }, [searchValuesDiary]);

  if (isLoading || isFetching) {
    <Loading center />;
  }

  // diaries && (diaries.result.length < 4 ? false : true);
  console.log(
    diaries && diaries.result.length,
    `length in diaryContainer ${lastMonth ? "lastmonth" : "month"} `
  );
  if (isSuccess) {
    if (diaries.result.length <= 0) {
      return (
        <Wrapper>
          <div className="no-diaries-container">
            <h2>...no diary entries</h2>
          </div>
        </Wrapper>
      );
    }
    return (
      <Wrapper>
        <div className="diary-container">
          <div className="this-month">
            {
              <Carousel
                key={lastMonth ? "Carousel-Last-Month" : "Carousel-First-Month"}
                className="carousel"
                responsive={responsive}
                showDots={diaries && (diaries.result.length < 4 ? false : true)}
              >
                {diaries.result.map((diary) => {
                  const {
                    diaryTitle,
                    mood,
                    performance,
                    createdAt,
                    text,
                    _id: diaryId,
                  } = diary;

                  return (
                    <SingleDiaryEntryDisplay
                      key={diaryId}
                      diaryId={diaryId}
                      title={diaryTitle}
                      createdAt={createdAt}
                      mood={mood}
                      performance={performance}
                      text={text}
                    />
                  );
                })}
              </Carousel>
            }
          </div>
        </div>
      </Wrapper>
    );
  }
};

export default DiaryContainer;

I also modified the dots and the arrows position in the css (but even with removing this customisations, the problem is happening. So i assume it has nothing to do with the bug).

BUG:
Everytime when i change the filter from month June to month May (so in the bottom section the month is changing from March to April) April is now not showing any dots or arrows, despite there are a roughly 10 items.

When i am refreshing the page and month May is selected its working correct and also when i am hoping between the months (except the change from June to May).

When i remove this code snippet (diaries && (diaries.result.length < 4 ? false : true) and only use true, the App is even breaking and gives the output: array length is invalid component dot cant load.

For me it seems, that Carousel is not correctly refreshing/rerendering.

So when month June is chosen, the bottom section in May has only one item (so no dots and arrows should be displayed). Then when i change to May and April is now in the bottom and injected dataset is correct (it shows the items from April) but now the dots and arrows are still disabled, but should be enabled because of the 10 items.

I tried a lot with the refetching in in useEffect and the setState hook, to force a rerendering and correct refreshing, but the carousel is not refreshing.

I even put on nearly every component a key prop. But the Bug is still there.

Has anyone a idea to solve this problem? Maybe is the structure of my code so bad (i am a beginner), that this bug is not known in production.

I would thanks a lot for help.