I'm working on a Next.js project and trying to disable Server-Side Rendering (SSR) for a specific component. To achieve this, I'm using next/dynamic with the ssr option set to false. However, it seems that SSR is still enabled for this component. Here's my code:

"use client"

import { useReducer } from 'react';
import { AddPlaylist } from "@/components/playlist/add-playlist";
import { Playlists } from "@/components/playlist/play-lists";
import dynamic from 'next/dynamic';

const AddListBtn = dynamic(() => Promise.resolve(AddPlaylist), {
  ssr: false,
})

function reducer(state : {count : number}, action : unknown){
  return { count : state.count + 1 }
}

export default function Home() {
  // listening CRUD actions for playlists 
  const [ state , dispatch] = useReducer(reducer, {count : 0})
  
  return (
    <div className="flex-1 min-h-screen">
      <div className="border-b-2 w-full dark:bg-[#1C1D26] dark:border-b-[#22232E] border-b-[#F5F5F8] py-3 flex flex-row-reverse z-40 sticky top-0">
        <AddListBtn state={state} dispatch={dispatch}/>
      </div>
      <Playlists state={state} dispatch={dispatch}/>
    </div>
  )
}

I've set ssr: false for the AddListBtn component, but it doesn't seem to have any effect. What am I missing, and how can I properly disable SSR for this component?

Any help or guidance would be greatly appreciated. Thank you!