Tengo una función que llama a una API y devuelve una matriz cuando se registra la consola. El efecto de uso se está ejecutando y devuelve la matriz normalmente, pero nunca actualiza la interfaz. He estado trabajando en esto por un tiempo y no he encontrado una solución. ¿Me estoy perdiendo de algo?

 useEffect(()=>{ const fetchData = async (user) => { console.log(user) const { data, error } = await supabase .from('contacts') .select() .match({ user_id: user }) return data; } const user = supabase.auth.user().id; fetchData(user).then((data)=> { // console.log(data) setContacts(data); console.log(contacts) }).catch(error=>{ console.log(error) }) // returns an array or objects. each object is a contact },[contacts]) return( <div> <h1>All Contacts</h1> <tbody> <tr> <th>Name</th> <th>email</th> <th>phone</th> <th>notes</th> </tr> { contacts.map((contact, i) => { <tr key={i}> <td>{contact.prosepct_name}</td> <td>{contact.prospect_email}</td> <td>{contact.prospect_phone}</td> <td>{contact.notes}</td> </tr> }) } </tbody>