Contacts not displaying on clicking Add button (React App)

Question

After adding key={ contact.id} to ContactList component, contacts (name, email, and trash icon) are not visible on clicking Add button. Id (generated by uuid) is passed from ContactCard to ContactList and then to App.js. I am new to react and its concepts. There may be a tiny mistake but I am not able to figure it out.

Here's how it should be...

Here's how it is...

These components are going to be checked,

App.js

function App() {
const LOCAL_STORAGE_KEY = "contacts";
const [contacts, setContacts] = useState([]);

const addContactHandler = (contact) => {
setContacts([...contacts, {id: uuid(), ...contact }]);
};

const removeContactHandler = (id) => {
const newContactList = contacts.filter((contact) => {
  return contact.id !== id;
}); setContacts(newContactList);}

useEffect(() => {
const retreiveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
if(retreiveContacts) setContacts(retreiveContacts);
}, []);

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> );}

ContactList.js

import React from "react";
import ContactCard from "./ContactCard";

const ContactList = (props) => {
const deleteContactHandler = (id) => {
    props.getContactId(id);
};

const renderContactList = props.contacts.map((contact) => {
    return <ContactCard 
    contact = {contact} 
    clickHandler = {deleteContactHandler} 
    key={ contact.id}/>
});

return (
<div className="ui celled list"> {renderContactList} </div> 
);};

ContactCard.js

const ContactCard = (props) => {
const {id, name, email} = props.contact;
return (
    <div className="item ">
        <img className="ui avatar image" src={user} alt="user" />
            <div className="content">
                <div className="header">{name}</div>
                <div>{email}</div>
            </div>
            <i className="trash alternate outline icon" 
            style={{color: "red", marginTop: "10px "}}
            onClick={() => props.clickHandler(id)}></i>
        </div>
);};