React: setState from a form subpage not updating state

I have a form with a subpage setup, and it does some processing when the subpage is loaded (via useEffect), which I then set to the form state with a function (handleSetInitial) passed to the functional components / subpages:

handleSetInitial = (input, value) => () => {
    switch (input) {
        case "set_initial_npc":
            this.setState({ selected_npcs: [...value] });
            break;
        case "set_initial_loc":
            this.setState({ selected_locs: [...value] });
            break;
        default:
            break;
    }
}

render() {
    if (hasLoadedJson) {
        switch (step) {
            case 1:
                return (
                    <DurationPage nextStep={this.nextStep} handleChange={this.handleChange} values={values} defaults={DEFAULTS} />
                );
            case 2:
                return (
                    <NpcsPage nextStep={this.nextStep} prevStep={this.prevStep} handleChange={this.handleChange} handleSetInitial={this.handleSetInitial} values={values} defaults={DEFAULTS} />
                );
            case 3:
                return (
                    <LocationsPage nextStep={this.nextStep} prevStep={this.prevStep} handleChange={this.handleChange} handleSetInitial={this.handleSetInitial} values={values} defaults={DEFAULTS} />
                );
            default:
            // do nothing
        }
    }
}

And here's what it looks like on the subpages:

useEffect(() => {
    Refresh();
    if (values.selected_locs.length === 0) {
        Reroll();
    }
}, []);

const Refresh = () => {
    if (values.total_locs < values.selected_locs.length) {
        let randomLocList = values.selected_locs;
        randomLocList.pop();
        handleSetInitial("set_initial_loc", randomLocList)();
    } else if (values.total_locs > values.selected_locs.length) {
        Reroll();
    }
}

const Reroll = e => {
    if (e) {
        e.preventDefault();
    }

    let randomLocList = [];
    let i = 0;
    while (i < values.total_locs) {
        let index = Math.floor(Math.random() * locList.length);
        let loc = locList[index];
        if (containsObject(loc, randomLocList)) {
            continue;
        } else {
            i++;
            randomLocList.push(loc);
        }
    }

    handleSetInitial("set_initial_loc", randomLocList)();
}

The idea here is that the subpage generates a number of dropdown inputs, each getting data from the same list, but each are randomized, and cannot repeat. That part of the code works fine, but when it comes time to save that randomized list to the state, it just doesn't happen, and thus the page renders the default values for all the dropdowns.

The weird part is that the same code is on two subpages, but one works and the other doesn't. handleSetInitial is being called, and it does receive the list, but it just doesn't update the state, and I'm not sure why. Any advice?

Here's my code sandbox for it, if you want to see it in action: https://codesandbox.io/s/seasonal-data-generator-v3-cbviwi

from React: setState from a form subpage not updating state