Estoy tratando de mostrar un menú con tres etiquetas Streaming , On Tv y In Theaters similar a lo que puedes encontrar en https://www.themoviedb.org/

Los datos predeterminados que se muestran son la sección Streaming , que recibe JSON de getStaticProps . Solo quiero obtener los puntos finales On Tv y In Theaters si el usuario hace clic en ellos y luego almacenar esa información en caché. Este es mi código hasta ahora (solo On Tv , aunque In theaters sería lo mismo):

 import useSWR from 'swr' import React, { useState } from "react"; const fetcher = async (e) => { const res = await fetch(e); const data = await res.json(); return data }; const Trending = ({data}) => { const [media, setMedia] = useState(data); //data used to display shows/movies const [onTv, setOnTv] = useState(null); const [shouldFetchTv, setShouldFetchTv] = useState(false); const urls = [ `https://api.themoviedb.org/3/tv/on_the_air?api_key=${process.env.NEXT_PUBLIC_API_KEY}&language=en-US&page=1`, `https://api.themoviedb.org/3/movie/now_playing?api_key=${process.env.NEXT_PUBLIC_API_KEY}&language=en-US&page=1&region=US` ] const tv = useSWR(shouldFetchTv && urls[0], fetcher); const tvResult = tv.data; const handleTv = () => { onTv ? setMedia(onTv) //if onTv has data then just set it : setShouldFetchTv(true); //fetches endpoint on users click setOnTv(tvResult); // caches the data setMedia(onTv); //sets media object with the cached data } (...Some more code) <div onClick={handleTv}> <h1>On Tv</h1> </div>

El problema es que el objeto onTv no se define correctamente en el primer clic, sino en el tercero. He estado tratando de implementar useEffect sin ningún efecto (sin juego de palabras), pero todavía estoy aprendiendo ganchos, así que tal vez me esté perdiendo algo. ¿Cómo puedo hacer que funcione correctamente?