Component not updating data when display turned on using React - reactjs

Question

I have a component that is not updating with the latest information when it's displayed again. I feel like this has to do with the asynchronous nature of hooks, and I'm still not 100% on async functions or how to update them properly.
const [notes, setNotes] = useState([]);
const [showCreate, setCreate] = useState(false);
const [note, setNote] = useState({});
function toggleCreateCard() {
setCreate(() => !showCreate);
}
function addNote(newNote) {
setNotes(prevNotes => {
return [...prevNotes, newNote];
});
}
The state in question is "note". I have it set to toggle the create card on and off using a boolean which will first get called when created using this below and then when saved will run addNote to add it into an array
function createNewCard(newItem) {
setNote({
header: newItem,
content: "",
checklist: [],
pictures: [],
dueDate: "",
comments: []
});
toggleCreateCard();
}
This function is where I start running into problems. The function below takes an id for the "notes" array and sets note to match the object contained within it, which should be a filled out version of the original item in createNewCard
function showCard(id) {
setNote(notes[id]);
toggleCreateCard();
}
This "ShowCard" gets triggered when the card is clicked on and is supposed to load the card back up with the data from the note array. However, it seems that note is not updating in time and all it pulls is the header that was last set in createNewCard. I've tested and it will show the last assigned title only, and if I say create a second card and click between the two, it'll show the "correct" title but no description or anything else, and the "note" constant is set to the last updated item (for example if I run this once right after creating a note, it's all blank except the title which was originally created when I opened create card (what was set as newItem). If I run this again on the same card and check what note is set to, it will then be set to the note with the id I queried before, even if it's not the same as the one I just ran it with)
Below is the component call in the return statement, which gets displayed when the note is first created and when the note gets clicked on.
{showCreate ? (
<CreateCard
note={note}
addNote={addNote}
createOff={toggleCreateCard}
/>
) : null}
and just for extra details, here's my CreateCard component
import React, { useState } from "react";
import Fab from "#material-ui/core/Fab";
import AddIcon from "#material-ui/icons/AddCircle";
import Checklist from "./CreateCard/Checklist";
import Description from "./CreateCard/Description";
import DueDate from "./CreateCard/DueDate";
import Pictures from "./CreateCard/Pictures";
import Title from "./CreateCard/Title";
function CreateCard(props) {
const [loadNote, setNote] = useState({
header: props.note.header,
content: props.note.content,
checklist: props.note.checklist,
pictures: props.note.pictures,
dueDate: props.note.dueDate,
comments: []
});
function handleChange(event) {
setNote(prevNote => {
return {
...prevNote,
[event.name]: event.value
};
});
}
function submitNote() {
props.addNote(loadNote);
props.createOff();
}
return (
<form
className="create-card form-styling shadow-15px lato"
onKeyPress={e => {
e.key === "Enter" && e.preventDefault();
}}
>
<Title header={loadNote.header} update={handleChange} />
<Description description={loadNote.content} update={handleChange} />
<Checklist checklist={loadNote.checklist} update={handleChange} />
<Pictures pictures={loadNote.pictures} update={handleChange} />
<DueDate duedate={loadNote.dueDate} update={handleChange} />
<Fab color="primary" aria-label="add" size="small" onClick={submitNote}>
<AddIcon />
</Fab>
</form>
);
}
How do I get it to correctly load the object into note and then display the information stored in the object whenever the component is rendered?