This code works on my desktop browser but not on my mobile browser (Safari or Chrome).

const Board = () => {
    const x=useRecoilValue(nstate);
    const values=useRecoilValue(nspaces);
    const [hash,setHash]=useRecoilState(nplaces);
    const size=Math.sqrt(values.length);
    let bx=Array.from({ length: Math.ceil(values.length / size) }, (v, i) => values.slice(i * size, i * size + size));
    let board=bx.map((item)=> <Fleg>{item.map((x)=> <Col><p><img src={getPhoto(hash[x])} alt=""/></p><p>{Ops(hash,setHash,x)}</p></Col>)}</Fleg>);
    useEffect(() => {
            console.log("show the hash: ",hash);
            board=bx.map((item)=>
                    <Fleg>{item.map((x)=> <Col><p><img src={getPhoto(hash[x])} alt=""/></p><p>{Ops(hash,setHash,x)}</p></Col>)}</Fleg>
            );
    },
    [hash]
    );

    return (
            <>
            {board}
            </>
    );
}

The "hash" is just a dictionary object that has like [0,0]: 1, for all the possible values/positions of the 'board' ( (0,0) through (3,3) ).

If the value is 1, getPhoto(hash[x]) shows a red dot, if 2 a blue dot.

The problem, which only happens on mobile, is that when hash updates, the surrounding 'squares' get updated images, but the current 'square' is not updated.

To me it seems like it should work - hash is being updated, and printing to the console w/the expected values - but the UI doesn't show what hash does. The current 'cell' does not update its image, even after it has changed.