How to use the use-query-params.withDefault function in use-query-params

const ExplorerView = () => {
    const theme = useTheme();
    const styles = useStyles();
    const [sources, setSources] = useState(undefined as string[] | undefined);
    const [query, setQuery] = useState(QUERY);
    const [submittedQuery, setSubmittedQuery] = useQueryParam("q", withDefault(StringParam, QUERY));
    const [queryResult, setQueryResult] = useState(undefined as QueryResultSetWithSources | undefined);
    const [isQueryLoading, setIsQueryLoading] = useState(false);
    const [error, setError] = useState(undefined as undefined | Error);
    const [schemaOpen, setSchemaOpen] = useState(false);
    const [databaseDialogOpen, setDatabaseDialogOpen] = useState(false);
    const [searchValue, setSearchValue] = useState("");
    const [searchFocus, setSearchFocus] = useState(false);

    const handleQuerySubmit = useCallback(async (q: string) => {
        setSubmittedQuery(q);
    }, [setSubmittedQuery]);

    useEffect(() => {
        (async function() {
            setIsQueryLoading(true);
            try {