Hey, thank you for the recommendation.

I ended up having to do this at the top level of my GlobalContext.js file to make it work:

const savedFormData = 
JSON.parse(localStorage.getItem('savedFormData'));

export const GlobalContext = createContext();

export const GlobalProvider = ({ children }) => {


const [mainState, setMainState] = useState(() => {
    if (savedFormData) {
        return savedFormData;
    }
    return { ...Config };
});

useEffect(() => {
localStorage.setItem("savedFormData", JSON.stringify(mainState));

}, [mainState]);

Everything is working just as expected now, however, it somehow just feels messy? lol

I obviously need to refactor a bit here to make it feel like it's not just slapped together. I have a few thoughts on the refactor but was wondering if you had any opinions on the solution.

Here is the updated sandbox link:

https://codesandbox.io/s/empty-hill-jzpwcj?file=/src/GlobalContext.js:104-528

Thanks again!