How to edit the rerender item in react hooks

Question

I want to edit my rerender item. To explain better that I could identify If I edited that certain item here is the code for the array

const [savedAccounts,setsavedAccounts] = 
0: {nick: "xaxa", pass: "215151", uid: "1123151", gallery: []}
1: {nick: "SamServer", pass: "mathlearner18", uid: "123456123456", gallery: []}

I already have the solution to insert my item in my gallery by rerendering the item using these code it is updating of items in a gallery of a certain account This is the functional codes for updating the gallery items

const [isuploadgallery,setisuploadgallery] = useState(false);
const [textgallery,setTextgallery] = useState();

const handleTextGallery = e => {
    setTextgallery(e.target.value)
}
 const Profile = styled.button`        
    width:calc(400px);
    height:calc(400px);
    border-radius: 100%;
`;

 const [gallery,setgallery] = useState(null)

 const hiddenFileInput2 = useRef(null);

 const handleClickGallery = event => {
  hiddenFileInput2.current.click();
};
const handleChangeGallery = event => {
  const fileUploaded = URL.createObjectURL(event.target.files[0]);
  setgallery(fileUploaded);
};

const handleUploadPost = e => {
    e.preventDefault()
    multisavedAcc(prevState => {
        return prevState.map(acc_ => {
            if (acc_.uid === uid) {
                return {
                    ...acc_,
                    gallery: [
                        ...acc_.gallery,
                        { img: gallery, description: textgallery }
                    ]
                };
            } else {
                return acc_
            }
        });
    });
}

And this is for the inputs that create the gallery of the account

<div>
  <div className="popup-box">
  <div className="box">
    <div className="item-box">
      <span className="close-icon" onClick={togglePopup}>x</span>
      <b>Design your Popup</b>
       <Profile onClick={handleClickGallery}>
         <img src={gallery} alt="" />
       </Profile>
       <input type="file"
       ref={hiddenFileInput2}
       onChange={handleChangeGallery}
       style={{display:'none'}} 
       /> 
     <div className="context">
     Description <button onClick={e => setisuploadgallery(true)}> Edit </button>
     </div>
    { isuploadgallery ? <> 
     <div className="edit-area">
    <textarea name="Text1" cols="40" rows="5" value={textgallery} onChange={e => handleTextGallery(e)}></textarea> 
     <button onClick={e => setisuploadgallery(false)}> Update </button>
     </div>
     </>
     : <><p> {textgallery} </p></> }
     <button onClick={e => handleUploadPost(e)}> Upload Post </button>
     </div>
     </div>
     </div>

      </div> 

As you see I update my items in my gallery as img and description and so that I could update my arrays in gallery. But I want to edit it each of gallery of the item accounts. I already tried this idea

multisavedAcc(prevState => {
        return prevState.map((acc_) => {
            if (acc_.uid === uid) {
                return (
                    acc_.gallery[editindex].description = textgalleryedit
                )
            } else {
                return acc_
            }
        });
    });

but It didn't work cause it is deleting the name of the gallery and turn it into null. I was trying the CRUD method wherein I can edit it but I just can't do it, I don't know where suppose edit it in the part of UploadPost can anyone find the solution this for me?

Here is the expected output that I want to do

Let say I have

const [savedAccounts,setsavedAccounts] = 
0: {nick: "xaxa", pass: "215151", uid: "1123151", gallery: []}
1: {nick: "SamServer", pass: "mathlearner18", uid: "123456123456", gallery: [{img:"img1",description:"text1"},{img:"img2",description:"text2"}]}

and I want to edit my gallery of my open account is "SamServer" that will have this output

1: {nick: "SamServer", pass: "mathlearner18", uid: "123456123456", gallery: 
[{img:"newimg1",description:"newtext1"},{img:"newimg2",description:"newtext2"}]}

New issue Edited:

    const collectionGallery = savedAcc.map((el,i) => {
    let gallery_
    console.log(gallery_)
    if(el.uid == uid) {
        gallery_ = el.gallery.map((items,j) => {
            return(
                <div>
                    <div className='item-sample' key={j} onClick={e => togglePopupImageEdit(j)}>   
                        <div className="img-item">
                        <img src= {items.img} alt="" /> 
                        </div>
                        <h3> {items.description} </h3>
                        
                    </div>
                    <button onClick={e => handleDeleteItem(j)}> Delete </button>
                </div>
            )
        })
    }

    return(
        <div className="collection-photo">
            {gallery_}
        </div>
    )
})

As you can see I want to call back the items so that I can show it in return but when I tried to refresh it...the images are vanish but in the localStorage it is still there please help sir. I am almost done i just want my image don't vanish..

and here is the console error

   blob:http://localhost:3000/fb44255c-d443-4b54-8cbe-860338b6f2ed:1 
   Failed to load resource: net::ERR_FILE_NOT_FOUND
     blob:http://localhost:3000/04d545aa-8ecb-4412-a59f-088cd01a793d:1 
   Failed to load resource: net::ERR_FILE_NOT_FOUND
      blob:http://localhost:3000/3d5e6bff-cfbe-4182-a284-8d15ea6206eb:1 
       Failed to load resource: net::ERR_FILE_NOT_FOUND
   blob:http://localhost:3000/3274933a-1620-4b0a-b35f-1e226f37d8a8:1 
      Failed to load resource: net::ERR_FILE_NOT_FOUND
  blob:http://localhost:3000/eb49ff52-fd9e-4e94-a9bd-86e6e13e2b08:1 
    Failed to load resource: net::ERR_FILE_NOT_FOUND