swiper/react and unnecessary renders

Question

I am having trouble utilizing 'react/swiper' library in a fully optimized way. I have two child component that are essentially being used as the slide content: a QuestionPanel and an AnswerPanel.

In the parent component the TestPanel I am trying to utilize the swiper so that every time a user presses "next" the swiper activates. the problem Is that I need to essentially tell swiper library that there will be 30 slides (or as many as there are questions)

   {state.deck.map((question, index) => {
          return (
            <SwiperSlide key={index}>
              <QuestionPanel />
              <AnswerPanel />
            </SwiperSlide>
          );
        })}

THE PROBLEM with this is that originally these components only re-rendered when the state changes (ie. the button is pressed and the next question/answer text updates on the component) When I utilize the swiper library it is rendering both of these components 30 times EACH time I press next. that is 900 renders when I only need 30. There are 30 questions total on the test.

How can I memoize or essentially tell the swiper library to not render the component? it seem the swiper library only works by mapping but all of my state and data is being recreated/re-rendered on every single "next question" button press.

here is a bit more code is it helps:

const sliderSettings = {
    navigation: {
      nextEl: ".testimonial-slider-next",
      prevEl: ".testimonial-slider-prev",
      disabledClass: "testimonial-slider-disabled",
    },
    autoHeight: true,
    spaceBetween: 16,
    slidesPerView: 1,
    watchSlidesProgress: true,
    breakpoints: {
      1024: {
        autoHeight: false,
        slidesPerView: 1,
        spaceBetween: 0,
      },

      1366: {
        autoHeight: false,
        spaceBetween: 0,
        slidesPerView: 1,
      },
    },
  };

export const TestPanels: React.FC = () => {
  const { state, dispatch } = useContext(siteContext);
  const payloadObj = {
    id: state.question.id,
    deck: state.deck,
    submittedAnswer: state.submittedAnswer,
    category: state.question.category,
  };
  return (
    <StyledTestPanel>
      <Slider sliderSettings={sliderSettings}>
        {state.deck.map((question, index) => {
          return (
            <SwiperSlide key={index}>
              <QuestionPanel />
              <AnswerPanel />
            </SwiperSlide>
          );
        })}
        <StyledButtons>
          <Button
//this is activating the slider///
            className="testimonial-slider-next"
            color="pink"
            onClick={() =>
              dispatch({ type: "NEXT_QUESTION", payload: payloadObj })
            }
          >
            Next
          </Button>
        </StyledButtons>
      </Slider>
    </StyledTestPanel>
  );
};

i tried using a memoized version of the slider settings but don't even know what to put in the dependency. Not quite sure under the hood how the library works or if there is a way to not render like this. essentially whatever I put within that .map function and component is being rendered for each question EVERY time the slide changes. so 30x30 renders. Surely there is a way to handle more complex slider functionality like this that depends on a bit more state. Even in a simple context like an image slider I can't really see how this is avoided with mapping if the content within the slider is in fact a component.