ReactJS, dropdown filter is not working after refreshing the page

I will describe a bug I am having trouble fixing.

I am using this dropdown.

Assume the dropdown is already populated and Asia was already selected. It will filter all the data and the output is correct but once I refreshed the page, "Asia" is still selected in the dropdown but the output is incorrect, in fact, the output will show all the data instead of filtered data. (Expected output: All users which are located in Asia only, The Output: All users that are located on different continents)

So, how can I fix this?

import { Select } from 'antd';
import { useRouter } from 'next/router'
import { useSelector } from "react-redux"
const { Option } = Select;  
import { useEffect } from "react"
import useCountries from '@src/hooks/useCountries'
import useFilterJobs from '@src/hooks/useFilterContinents';

const ContinentsDropdown = ({paramName ="role"} ) => {
    const { user }          = useSelector(state => state)
    const data              = useFilterContinents();   
    const router            = useRouter()
    const role              = router.query[paramName]
    

    const onChange = (role) => {
        if(role)
        {
            router.query[paramName] = role;
        }
        else
        {
            delete router.query[paramName];
        }

        router.push(router, null, { shallow: true })
    }

    return (
        <Select
            placeholder     = "Roles"
            onChange        = {onChange}
            defaultValue    = {role}
        >
 <Option value="">Any Role</Option>
            {
                [
                    "Asia", 
                    "Europe", 
                    "Oceania", 
                    "North America", 
                    "South America",
                    "Africa",
                    "Antarctica"
                    
                ].map((role, index) => (
                    <Option
                        key     = {"option-" + index}
                        value   = {role}
                    >
                        {role}
                    </Option>
                ))
            }
        </Select>
    )
}

export { ContinentsDropdown }