Can't use percentage or window to calculate px value in React Swiper

Question

I use NextJS 14, and here is my code

"use client";

import { type ReactNode, useRef } from "react";
import { type Swiper as SwiperType } from "swiper";
import { Swiper } from "swiper/react";
import "swiper/css";
import "./styles.css";


const SwiperSection = () => {
  const swiperRef = useRef<SwiperType>();

  return ( 
      <Swiper
        onBeforeInit={(swiper) => {
          swiperRef.current = swiper;
        }}
        slidesOffsetBefore={0}
        breakpoints={{
          1280: {
            slidesOffsetBefore: (window.innerWidth - 1280)/2
          },
        }}
        spaceBetween={0}
        slidesPerView={"auto"}
        className="mySwiper"
      >
        {slides}
      </Swiper>
  );
};

export default SwiperSection;

The issue arises with an error message at this line stating that window is not defined:

slidesOffsetBefore: (window.innerWidth - 1280)/2

I tried using useEffect and useState based on this solution that I found. However, the Swiper initializes only during the first render when the initial width is 0, before it sets to window.innerWidth.

How can I effectively utilize window.innerWidth in this scenario? Alternatively, is there a solution to utilize a percentage calculation like this?

slidesOffsetBefore: calc((100% - 1280px)/2)