Why Isn't may Array of image SRC's are not updating with UseState

March 14, 2023

I am trying to make an app where you can click on an anchor point on a page, then click on an image in a side div and change the anchor point’s image src to be that of the new image clicked. I have an array of image SRC’s that I map through, however when I manipulate this array and run it through useState, but the images do not update while the array of locations does. The images render correctly on first render, but do not re-render after calling useState.

This is the current State of the relevant code

let anchorsImages = useMemo(() => [
        beads[0].image,
        beads[0].image,
        beads[0].image,
        beads[0].image,
        beads[0].image,
        beads[0].image,
        beads[0].image,
        beads[0].image,
        beads[0].image,
        beads[0].image,
        beads[3].image,
    ],[])

    let indexOfCurrentAnchor = null

   const [anchorsState, setAnchorsState] = useState(anchorsImages)

   useEffect(() => {
         setAnchorsState(anchorsImages)
   },[anchorsImages])

   const changeBead = (bead) => {
        anchorsImages[indexOfCurrentAnchor] = bead
        setAnchorsState(anchorsImages)
        console.log(anchorsImages)
    }

    const changeAnchor = (index) => {
        indexOfCurrentAnchor = index
    }

<div className="left">
                    {beads.map((bead, index) => {
                        return <img src={bead.image} key={Math.floor(Math.random()*1000)} className='bead' alt="Jewelry" onClick={()=>{changeBead(bead.image)}}/>
                    })}
                   </div>
                   <div className="middle">
                         <img src={mannequin} id='mannequin' className='img' alt="Jewelry"/>
                         <img src={chain}  id="chain" className='img' alt="chain"/>
                         <div className='anchors'>
                         {anchorsState.map((anchor, index) => {
                            return <img src={anchor} key={Math.floor(Math.random()*1000)} className={'anchor'+" "+"anchor"+index} alt="Jewelry" onClick={()=>{changeAnchor(index)}}/>
                        })}
                         </div>
                         
                   </div>

changeAnchor is successfully changing the index, changeBead is changing the correct bead in anchorsImages/AnchorsState, however the application is not rendering the changes.