React useState gets previous value after history.push

I am trying to change URL when <RadioGroup onChange={handleCategoryChange}/> event fired:

const history = useHistory();
const { categoryId } = props;
const [category, setCategory] = useState(categoryId);

const handleCategoryChange = event => {
    history.push(`/books/${event.target.value}`)
};

Url will change according to categoryId parameter.

But when the page re-renders with new categoryId it still gets the previous value while I am expecting it to set the new categoryId

const [category, setCategory] = useState(categoryId);

Answer

You should update the new value:

const history = useHistory();
const { categoryId } = props;
const [category, setCategory] = useState(categoryId);

const handleCategoryChange = event => {
    setCategory(event.target.value);
    history.push(`/books/${event.target.value}`)
};