Use useNavigate instead of useHistory

This was a breaking change

src/Agenda.js

@@ -10,7 +10,7 @@ import Filter from "./components/Filter"
 
 import produce from "immer"
 
-import { useLocation, useHistory } from "react-router-dom"
+import { useLocation, useNavigate } from "react-router-dom"
 
 import debounce from 'lodash.debounce'
 
@@ -84,13 +84,13 @@ const Row = ({day, filters, events, ...rest}) => {
  </tr>
 }
 
-const updateSearchInURL = debounce((history, location, columns) => {
+const updateSearchInURL = debounce((navigate, location, columns) => {
   const search = new URLSearchParams()
   columns.filter(c => c).forEach(c => search.append("filter", c))
   const state = {...location, search: "?" + search.toString()}
   if (state.search !== location.search &&
-      location.pathname === history.location.pathname) {
-    history.push(state)
+      location.pathname === navigate.location.pathname) {
+    navigate.push(state)
   }
 }, 250)
 
@@ -104,10 +104,10 @@ function Agenda(props, state) {
     const location = useLocation()
     const search = new URLSearchParams(location.search)
     const [columns, setColumns] = useState(search.getAll('filter'))
-    const history = useHistory()
+    const navigate = useNavigate()
 
     React.useEffect(() => {
-      const unlisten = history.listen((newLocation, action) => {
+      const unlisten = navigate.listen((newLocation, action) => {
         if (newLocation.pathname !== location.pathname) {
           updateSearchInURL.cancel()
         }
@@ -120,8 +120,8 @@ function Agenda(props, state) {
     }, []) // eslint-disable-line  react-hooks/exhaustive-deps
 
     React.useEffect(() => {
-      updateSearchInURL(history, location, columns)
-    }, [history, location, columns])
+      updateSearchInURL(navigate, location, columns)
+    }, [navigate, location, columns])
 
     let dom = nextDays(new DateTime({}), 40).map(d => d.toISODate())