No sé por qué me quedo undefined cuando traté de console.log en mi paso final en UseEffect

Recibí con éxito la respuesta, la respuesta me regresa con 200 estados y datos.

Diseñé mi base de datos así

2 tablas, la tabla de animes contiene un anime_title único y una id de incremento automático.

 id anime_title anime_image anime_url

La tabla anime_detail contiene una clave externa que está vinculada con anime-title en la tabla de animes .

 id anime_title anime_episode anime_url

Entonces, en mi código, traté de obtener anime_title en mi tabla de animes en superbase según la id de useParams

Los obtuve con éxito a ambos y utilicé con éxito anime_title para obtener todos los anime_episode basados en anime_title

Pero cuando traté de console.log el último paso, me devolvió un valor undefined , que no sé por qué.

Aquí está mi código:

 import { useState, useEffect } from "react" import './animedetail.css' import { useParams } from 'react-router-dom' import { supabase } from '../../supabaseClient' function AnimeDetail(){ let animeID = useParams() useEffect(async () => { // GET ID let id = await animeID.id console.log(id) // QUERY WITH ID const {data, error} = await supabase .from('animes') .select('id, anime_title, anime_url') .match({id: id}) // GET ANIME TITLE BY ID let animeTitle = await data[0].anime_title console.log(animeTitle) // GET EPISODE BASED ON ANIME TITLE const {dataInfo} = await supabase .from(`anime_detail`) .select(`id, anime_title, anime_url, anime_episode`) .filter(`anime_title`, `in`, `(${animeTitle})`) console.log(dataInfo) }, [animeID]) return ( <> <div className = "anime-list-section"> <h2>Anime Detail:</h2> <p></p> </div> </> ) } export default AnimeDetail