Invalid hook call on save, not edit when using swiper slider

I have installed swiper slider (react version) and created a custom block. When I add the block in the backend it works swimmingly and I can swipe just fine. But when I save and view in the frontend nothing appears. When I check the error messages after refreshing in the backend I see this message:

Uncaught Error: Invalid hook call. Hooks can only be called inside of
the body of a function component. This could happen for one of the
following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

import { registerBlockType } from "@wordpress/blocks";
import { useBlockProps } from "@wordpress/block-editor";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

import "./editor.scss";
import "./style.scss";

import json from "./block.json";
import { __ } from "@wordpress/i18n";
const { name, ...settings } = json;

registerBlockType(name, {
    ...settings,
    edit: (props) => {
        return (
            <div {...useBlockProps()}>
                <Swiper
                    spaceBetween={50}
                    slidesPerView={3}
                    onSlideChange={() => console.log("slide change")}
                    onSwiper={(swiper) => console.log(swiper)}
                >
                    <SwiperSlide>Slide 1</SwiperSlide>
                    <SwiperSlide>Slide 2</SwiperSlide>
                    <SwiperSlide>Slide 3</SwiperSlide>
                    <SwiperSlide>Slide 4</SwiperSlide>
                </Swiper>
            </div>
        );
    },
    save: () => {
        return (
            <div {...useBlockProps.save()}>
                <Swiper spaceBetween={50} slidesPerView={3}>
                    <SwiperSlide>Slide 1</SwiperSlide>
                    <SwiperSlide>Slide 2</SwiperSlide>
                    <SwiperSlide>Slide 3</SwiperSlide>
                    <SwiperSlide>Slide 4</SwiperSlide>
                </Swiper>
            </div>
        );
    },
});