recoil state getting reset after auth with different platforms

'use client'
import { useRecoilValue } from "recoil";
import { spotifyAtom, youtubeAtom } from "../recoil/atom";
import Link from "next/link";

function AuthButton() {

const spotify = useRecoilValue(spotifyAtom);
const youtube = useRecoilValue(youtubeAtom);
 console.log(spotify,youtube)

  return (
    <div className=" flex gap-5">
      {Object.keys(spotify).length > 0 ? (
        "Logged in Spotify"
      ) : (
        <Link
          href={
            "https://app.musicapi.com/shareplay/spotify/auth?returnUrl=http://localhost:3000/callback/spotify"
          }
        >
          Login to Spotify
        </Link>
      )}
      {Object.keys(youtube).length > 0 ?
       (
         "Logged in Youtube "
       )
       : 
       (
        <Link
          href={
            "https://app.musicapi.com/shareplay/youtube/auth?returnUrl=http://localhost:3000/callback/youtube"
          }
        >
          Login to Youtube Music
        </Link>
      )
      }
    </div>
  );
}

export default AuthButton;

"use client";
import { useEffect } from "react";
import { useSetRecoilState } from "recoil";
import { spotifyAtom, youtubeAtom } from "../../recoil/atom";
import {  useSearchParams } from "next/navigation";
import Link from 'next/link'

function Page({params}) {
  const searchParams = useSearchParams();

  const setData =
    params.slug === "spotify"
      ? useSetRecoilState(spotifyAtom)
      : useSetRecoilState(youtubeAtom);


  
  useEffect(() => {
    
    const data64 = searchParams.get("data64");
    if (data64) {
      const decodedData = atob(data64);
      const jsonData = JSON.parse(decodedData);
      setData(jsonData);


    } else {
      console.log("No data found..")
    }
  }, []);


  return (
    <div className=' flex flex-col '>
      Successfully Logged in to {params.slug}
      <br/>
      <Link href="/dashboard">Go to Dashboard</Link>
    </div>
  );
}

export default Page;

import { atom } from "recoil";

export const spotifyAtom = atom({
  key: "spotify",
  default: {},
});
export const youtubeAtom = atom({
  key: "youtube",
  default: {},
});