Issue with localStorage and signals

    const [currentImage, setCurrentImage] = createSignal('')
    const [currentTitle, setCurrentTitle] = createSignal('')

    createEffect(() => {
        const handleChange = () => {
          const gameStorageInfo = localStorage.getItem('CDG');
          if (gameStorageInfo) {
            try {
              const games = JSON.parse(gameStorageInfo);
              if (games.length > 0) {
                const firstGame = games[0];
                setCurrentImage(firstGame.gameImage); 
                setCurrentTitle(firstGame.gameTitle);
              }
            } catch (error) {
              console.error('Error parsing JSON:', error);
            }
          }
        };

        window.addEventListener('storage', handleChange);
      
        onCleanup(() => {
          window.removeEventListener('storage', handleChange);
        });

        handleChange();
      });


    return (
        <>
            {currentImage() ? (
                <>
                    <Dynamic
                        component="img"
                        className="current-image"
                        src={currentImage()}
                        alt="Game Image"
                    />
                    <div className="current-text-container">
                        <Dynamic
                            component="p"
                            className="currently-downloading-game-title"
                        >
                            {currentTitle()}
                        </Dynamic>
                    </div>
                </>
            ) : (
                <p>No active downloads</p>
            )}
        </>