const [selectedActivity, setSelectedActivity] = useState<Activity | null | undefined>(undefined)
const [customNames, setCustomNames] = useState<CustomNames>({})
const router = useRouter()
...
const changeActivity = useCallback((activity: Activity | null) => {
    setSelectedActivity(activity)

    const urlParams = new URLSearchParams(window.location.search);
    if (activity) {
        urlParams.set('activity', activity.id)
    }
    else {
        urlParams.delete('activity')
    }

    // set query params to reflect the selected activity, or remove them if null
    router.replace(`${window.location.pathname}?${urlParams.toString()}`)
}, [router])

useEffect(() => {
    if (calloutSet) {
        // read query params to see if activity is specified
        const urlParams = new URLSearchParams(window.location.search);
        const activityId = urlParams.get('activity');
        const activity = calloutSet.activities.find(activity => activity.id == activityId)

        changeActivity(activity ?? null)

        // also populate custom names
        const customNames: CustomNames = {}

        // Convert urlParams.entries() to an array and iterate over it
        Array.from(urlParams.entries()).forEach(([key, value]) => {
            const imageId = parseInt(key)
            if (isNaN(imageId)) return

            const imageReference = calloutSet.allImages.find(image => image.id == imageId)
            if (!imageReference) return

            // If the name is the same as the default, remove it from the custom names
            if (imageReference.name != value) {
                customNames[imageId] = value
            }
        })

        setCustomNames(customNames)

        // if the callout set is not custom, attempt to load the custom names from local storage
        if (!urlParams.has('isCustom') || urlParams.get('isCustom') != 'true') {
            const customNamesJson = localStorage.getItem(`${calloutSet.id}.customNames`)
            if (customNamesJson) {
                setCustomNames(JSON.parse(customNamesJson))
            }
        }
    }
}, [calloutSet, changeActivity])