react Изменяем GET параметр из URL в обработчике события

Пример на typescript, на JS все будет тем же, кроме описания типов:

import React from "react";
import { ChangeEventHandler } from "react";
import TextInput from "./TextInput";
import { History } from 'history';
import { StringKeyObject } from '@app-types';
import queryString from 'query-string';

type TextInputPropsType = {
    value?: any,
    onChange?: ChangeEventHandler,
    history: History,
    getParamName: string,
}


export default function UrlSyncedTextInput(props: TextInputPropsType) {
    const { value, onChange, history, getParamName } = props;

    const onChangeSelf = React.useCallback((evt) => {

        let params: StringKeyObject = queryString.parse(history.location.search);
        params[getParamName] = evt.target.value;

        console.log('history.location', history.location, params);
        history.replace(history.location.pathname + '?' + queryString.stringify(params));
        if (onChange) onChange(evt);
    }, [onChange, history, getParamName]);

    return (
        <TextInput value={value} onChange={onChangeSelf} />
    );
}

-- этот компонент как раз отвечает за изменение некоторого вложенного инпута TextInput и GET-параметра в адресной строке с именем getParamName.