Problem with Client Components in Nextjs 13 and Prismic.io

Question

I am currently building a web application in nextjs 13 and I was looking for a good cms to use along with it. I came across Prismic and it really looks nice. I have succeded on setting up the project with prismic and everything looks fine but I have a problem. I am currently building a really simple Logo component that has inside a PrismicNextImage, it looks like this:

"use client"

import React from 'react'
import { isMobile } from 'react-device-detect'
import { PrismicNextImage } from '@prismicio/next';

export default function Logo( { slice }) {

  return (
    <>
        {
            isMobile ? <PrismicNextImage field={slice.primary.logo.mobile} alt={'Test'} /> : <PrismicNextImage field={slice.primary.logo} alt={'Test'} />
        }
    </>
  )
}

The prismic slice looks like this:

/**
 * @typedef {import("@prismicio/client").Content.HeaderSlice} HeaderSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<HeaderSlice>} HeaderProps
 * @param {HeaderProps}
 */

import Logo from "@/app/components/Logo";


const Header = ({ slice }) => {
  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <Logo slice= {slice} />
    </section>
  );
};

export default Header;

In my prismic machine I have a simple image field that has a responsive view called main with the width 150 and one called mobile with the width 120. When running the application I get this warning: app-index.js:31 Warning: Prop width did not match. Server: "150" Client: "120" and in the browser I can see that the width of the image is still 150 even thought isMobile is returning true.

This is the code of the page.jsx in which I call the slice itself.

import { SliceZone } from "@prismicio/react";

import { createClient } from "@/prismicio";
import { components } from "@/slices";

export default async function Page() {
  const client = createClient();
  const page = await client.getSingle("homepage");

  return <SliceZone slices={page.data.slices} components={components} />;
}

export async function generateMetadata() {
  const client = createClient();
  const page = await client.getSingle("homepage");

  return {
    title: page.data.meta_title,
    description: page.data.meta_description,
  };
}

My question is how do I make it work so that the responsitivity works?

I tried to change the entire Header to use client but it is not working because the folder of slices falls out of the app folder så I don't this it is working. I'm still learning the version 13 so I'm not sure of this 100%