Por favor, ayúdame. Soy nuevo en React y trato de crear una aplicación para agregar contactos en el almacenamiento local y eliminar contactos. Los siguientes son el código de mi App.js

 import React, {useState, useEffect} from 'react' import {uuid} from 'uuidv4' import AddContact from './AddContact' import ContactList from './ContactList' import Header from './Header' function App() { //useState Hooks in React const LOCAL_STORAGE_KEY = 'contacts' const [contacts, setContacts] = useState([]) const addContactHandler = (contact) => { console.log(contacts) setContacts([...contacts, {id: uuid(), ...contact}]) } const removeContactHandler = (id) => { const newContactList = contacts.filter((contact) => { return contact.id !== id }) setContacts(newContactList) } useEffect(() => { const retrieve_contact = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) if (retrieve_contact) { setContacts(retrieve_contact) } }, []) useEffect(() => { localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts)) }, [contacts]) return ( <div className="ui container"> <Header /> <AddContact addContactHandler={addContactHandler} /> <ContactList contacts={contacts} getContactId={removeContactHandler} /> </div> ) } export default App

Recibí el error Uncaught RangeError: se excedió el tamaño máximo de la pila de llamadas.

Por favor, ayúdame, ¿cómo puedo eliminar este error? ¡Gracias!