Problem with components getting updated using state

Question

https://streamable.com/c1ygkw

I have a problem with images not being update in components even though the state of the items they receive their info from changes.

It starts here after picking an image from my computer and saving it

const savePictureChange = () => {
    // upload Image to Firestore
    uploadImage(user, type, imageFile, onImageUploaded);
    let fileGetter = document.getElementById("file");
    showImageWithFileReader(fileGetter, detailedImage);
    // close Modal
    setModalOpen(false);
  };

after its stored in firestorage

const onImageUploaded = (snapshot) => {
    // set storageUrl of Item
    const storageUrl = snapshot.metadata.fullPath;
    item.storageUrl = storageUrl;
    // store storageURL in fireStore and storage
    updateSnippetPartInFireStore(user.uid, item, "storageUrl", storageUrl);
    typeSetListFunction(item.type, updateSnippetPartInStorage(item));
  };

function updateSnippetPartInStorage(snippetPart) {
  const type = snippetPart.type.toLowerCase();
  const list = [...JSON.parse(localStorage.getItem(type))];
  const filteredList = list.filter((i) => i.id != snippetPart.id);
  filteredList.push(snippetPart);
  localStorage.setItem(
    snippetPart.type.toLowerCase(),
    JSON.stringify(filteredList)
  );
  return list;
}

I update the corresponding storeStates of my easy-peasy store (easy-peasy is based on redux)

// set Store lists by snippetPart type
  const typeSetListFunction = (type, list) => {
    console.log("type is ", type);
    switch (type) {
      case "Characters":
        console.log("setCharacters list is", list);
        setCharacters(list);
        break;
      case "Events":
        setEvents(list);
        break;
      case "Locations":
        setLocations(list);
        break;
      case "Items":
        setItems(list);
        break;
    }
  };

and here is how the store state traverses through the nodes. NavigationBar:

const NavigationBar = () => {
  const { characters, locations, items, events, storylines, snippets, words } =
    useStoreState((store) => store);

  useEffect(() => {
    console.log("characters from useStoreState are ", characters);
  }, [characters]);

  return (
    <div>
      <WriteItem imgSrc="icon_empty_space.png" />
      <NavigatorItem
        imgSrc="icon_character.png"
        name="Characters"
        link="characters"
        list={characters}
      />

{expanded && <SubItemBar list={props.list} specific={props.name} />}

SubItemBar:

const SubItemBar = ({ list, specific }) => {
  const nullCheckList = list ?? [];
  const notAnyList = nullCheckList.filter((i) => i.id != 0);
  const [importance, setImportance] = useState("Main");
  const [itemList, setItemList] = useState(notAnyList);

  const mainList = notAnyList.filter((i) => i.importance == "Main");
  const mentionedList = notAnyList.filter((i) => i.importance == "Mentioned");
  const sideList = notAnyList.filter((i) => i.importance == "Side");


<div className="subItemBar">
        {itemList.map((i) => (
          <NavigatorSubItem key={i.name} item={i} specific={specific} />
        ))}
      </div>

    const NavigatorSubItem = ({ item, specific }) => {
      const setDragCursor = useStoreActions((store) => store.setDragCursor);
      const { user } = useStoreState((store) => store);
      const { name, storageUrl } = item;
      const navigate = useNavigate();
      const image = useRef(null);
    
      useEffect(() => {
        if (storageUrl != "" && storageUrl != null) {
          console.log("getting image from FireStorage");
          getDownloadURL(ref(storage, storageUrl)).then((url) => {
            image.current.setAttribute("src", url);
          });
        }
      }, [image]);

but as you can see in the video. The images of the "NavigatorSubItem" wont refresh until I reload, and even more weirdly , the image of the component in the middle ( https://pastebin.com/1R2AHJy5 ) WILL update ... but only on the second try.

I just can't make it work flawlessly.

side question: set up like this I retrieve the images from firestorage anew every time i click on "main" "side" "mentioned". I tried saving the images in localStorage but I also couldn't make that work so i gave up thinking that this might be fine. Will this be a problem reads wise for storage payment or will it be fine? and if so, can i use localStorage to cache those images and where can I read up on that?