Next.js: 'prop did not match' when using 'use client'

Question

Today I have faced an error prop did not match on a Next.js website. The thing is that I have use client on the component that throws this error. So why would I be getting this error from a client component? Shouldn't client components not be compared against server since they don't even get rendered on the server? Or am I misunderstanding something?

Here is some example code:

'use client'

//Core
import { useEffect, useState } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import Slider from 'rc-slider'
import 'rc-slider/assets/index.css'

//Types
import type { Drop } from '#/lib/types/supabase'

//Components
import { SpeakerWaveIcon, SpeakerXMarkIcon, XMarkIcon } from '@heroicons/react/24/solid'

//Hooks
import useAudioPlayer, { useAudioPlayerStore } from '#/hooks/useAudioPlayer'

//Util
import secondsToMinutes from '#/lib/utils/secondsToMinutes'

/**
 * Music player component for playing Drops.
 * Uses useAudioPlayer() hook for managing audio.
 */
export default function MusicPlayer() {
  /*...*/
  return (
    <div>
       /*..*/
    </div>
  )
}

As you can see my component has use client at the top, but it still receives a hydration error.