React resetting state on back button but not running useEffect

Question

Looking here (React Router + back button is resetting my app state), I'm realizing that due to the Router unloading the component and then reloading it... the state of components gets cleared.

However, my hope was that useEffect could be run to re-initialize the state. Howevever, useEffect is not running because the props in the dependency array haven't changed.

So here is my component:

function FramesGallery(props) {
    const classes = useStyles();
    const [images, setImages] = useState();

    useEffect(() => {
        console.log('useEffect props :>> ', props); // DOES NOT LOG WHEN COMING TO THIS COMPONENET AFTER HITTNG "BACK" BUTTON
        if (props.framesPaths) {
            setImages(props.framesPaths.map((filename) => {   //TODO: helper class
                return {
                    src: 'https://apps.usgs.gov/sstl/media/cameras/' + props.folderName + '/' + filename,
                    thumbnail: 'https://apps.usgs.gov/sstl/media/cameras/' + props.folderName + '/' + filename,
                    w: props.imgW,
                    h: props.imgH,
                    title: filename.replace("_overlay.jpg", "").split("___")[1].replace("_", " ")
                }
            }));
        } else {
            setImages(props.items)
        }
    }, [props.framesPaths, props.folderName, props.imgH, props.imgW]);

    console.log('images :>> ', images);

    return (
        <div>
            {Array.isArray(images)  && props.imgH > 0 && props.imgW > 0 
                ? <PhotoSwipe
                    isOpen={props.isOpen}
                    items={images}
                    onClose={props.handleClose}
                    options={props.options && Object.keys(props.options).length ? props.options : null}
                />
                : <Paper elevation={5} className={classes.loadingPaper}><Typography color="textSecondary" align='center'>Frames or data for frame gallery not loaded correctly.</Typography></Paper>
            }
        </div>
    )
}

export default FramesGallery;

This works fine on the first render (when I click a button that sets "isOpen" to true on the parent compoennt)... "images" gets set just fine, component shows just fine.

Then I hit 'back' in the browser. It brings me back to the parent component as expected. The console.log(images) outputs an empty array. I'm not sure what 'emptied' it.

The parent hosts this component like so:

<FramesGallery
    imgW={imgGalleryW}
    imgH={imgGalleryH}
    isOpen={isGalleryOpen}
    handleClose={() => setIsGalleryOpen(false)}
    framesPaths={frames}
    folderName={cameraFolderName(cam)}
    options={{
        closeOnScroll: false,
        preload: [1, 6],
    }}
/>

Here is where the actual thing that breaks occurs: When I click the button on the parent that sets "isOpen" to true... the "images" array ends up empty because useEffect does not run. I have verified that 'frames' on the parent never empties during this process.

What is causing 'images' to empty? What is causing the 'useEffect of the FramesGallery not to run when returning after pressing 'back'?