next react veya js bilenler bakabilir mi r10++

// Loader.jsx
import React from 'react';
import Image from 'next/image';
const Loader = ({ isDarkMode, onToggleDarkMode }) => {
const loadingGif = isDarkMode ? '/dark.gif' : '/light.gif';
return (
<div className={`fixed top-0 left-0 w-screen h-screen flex items-center justify-center bg-opacity-500 ${isDarkMode ? 'bg-black text-white' : 'bg-white text-black'}`}>
<div className="flex flex-col items-center">

<img
id="loadingGif"
src={loadingGif}
alt="loading"
className='transition-transform duration-1000 ease-in-out'
style={{ width: '15%' }}
/>
<div className="mb-4 p-8">Hello Batman</div>
<button
className={`p-2 ${isDarkMode ? 'bg-white text-black' : 'bg-black text-white'}`}
onClick={onToggleDarkMode}
>


</button>
</div>
</div>
);
};
export default Loader;

tailwindin dark: class component yapısını kullanıyorum fakat butona bastığım zaman dark moddan light moda geçince beyaz ve istediğim sabit prop olduğu için fakat temayı toggle dark mode yani dark moda geçir dediğim zamanda aynısı geliyor gif olarak nedense çözemedim yardımcı olabilirseniz sevinirim

import React from 'react';
import Image from 'next/image';

const Loader = ({ isDarkMode, onToggleDarkMode }) => {
  const loadingGif = isDarkMode ? '/dark.gif' : '/light.gif';

  const containerClassName = `fixed top-0 left-0 w-screen h-screen flex items-center justify-center bg-opacity-500 ${isDarkMode ? 'bg-black text-white' : 'bg-white text-black'}`;

  return (
    <div className={containerClassName}>
      <div className="flex flex-col items-center">
        <img
          id="loadingGif"
          src={loadingGif}
          alt="loading"
          className='transition-transform duration-1000 ease-in-out'
          style={{ width: '15%' }}
        />
        <div className="mb-4 p-8">Hello Batman</div>
        <button
          className={`p-2 ${isDarkMode ? 'bg-white text-black' : 'bg-black text-white'}`}
          onClick={onToggleDarkMode}
        >
          Toggle Dark Mode
        </button>
      </div>
    </div>
  );
};

export default Loader;

böyle test edebilirmisin hocam

pm ilettim hocam teşekkür ederim