How to use the @reach/router.useNavigate function in @reach/router

const NetworkDetails = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const { networkId } = useParams()

  const { confirm } = useConfirmationDialog()

  const [isAdmitNodeModalOpen, setAdmitNodeModalOpen] = useState(false)

  const getNetworkQuery = useQuery(GET_NETWORK_WITH_INTERFACES, {
    variables: { id: networkId },
  })

  const [createInterface, createInterfaceMutation] = useMutation(CREATE_INTERFACE, {
    variables: { networkId },
  })

  const [deleteInterface, deleteInterfaceMutation] = useMutation(DELETE_INTERFACE)

const LinkDetailsView = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const urlParams = useParams()

  const { hostId } = location.state || {}

  const formik = useFormik({
    initialValues: {
      fromInterfaceId: null,
      toInterfaceId: null,
      allowedIps: [],
      persistentKeepalive: null,
    },
    validationSchema: Yup.object().shape({
      fromInterfaceId: Yup.string()
        .required()
        .nullable(),

const InterfaceDetailsView = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const urlParams = useParams()

  const { hostId } = location.state || {}

  if (hostId === undefined) {
    navigate(`/ui/hosts`)
  }

  const formik = useFormik({
    initialValues: {
      name: null,
      networkId: null,
      ipAddress: null,
      listenPort: null,
    },

const NewInterfaceView = () => {
  const navigate = useNavigate()
  const location = useLocation()

  const { hostId } = location.state || {}

  const formik = useFormik({
    initialValues: {
      name: null,
      networkId: null,
      ipAddress: null,
      listenPort: null,
    },
    validationSchema: Yup.object().shape({
      name: Yup.string()
        .required()
        .nullable(),
      networkId: Yup.string().nullable(),

const HostLinksTab = ({ hostId }) => {
  const navigate = useNavigate()
  const location = useLocation()

  const [searchFilter, setSearchFilter] = useState('')

  const getHostLinksQuery = useQuery(GET_LINKS, {
    variables: { fromHostId: hostId },
  })

  const [deleteLink, deleteLinkLinksMutation] = useMutation(DELETE_LINK, {
    variables: { id: undefined },
  })

  useEffect(() => {
    getHostLinksQuery.refetch()
  }, [location, getHostLinksQuery])

const NewNetwork = () => {
  const navigate = useNavigate()
  const { success, error } = useToast()

  const formik = useFormik({
    initialValues: {
      name: '',
      addressRange: '',
    },
    validationSchema: Yup.object().shape({
      name: Yup.string().required().nullable(),
      addressRange: Yup.string().required().nullable(),
    }),
  })

  const [createNetwork, createNetworkMutation] = useMutation(CREATE_NETWORK, {
    variables: {},
    onCompleted: () => {

const HostAttributesTab = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const urlParams = useParams()

  const formik = useFormik({
    initialValues: {
      name: null,
      labels: [],
      advertiseAddress: null,
    },
    validationSchema: Yup.object().shape({
      name: Yup.string()
        .required()
        .nullable(),
      advertiseAddress: Yup.string().nullable(),
    }),
  })

const NewLinkView = () => {
  const navigate = useNavigate()
  const location = useLocation()

  const { hostId } = location.state || {}

  const [selectedNetworkId, setSelectedNetworkId] = useState('')
  const [selectedHostId, setSelectedHostId] = useState('')

  const formik = useFormik({
    initialValues: {
      fromInterfaceId: null,
      toInterfaceId: null,
      allowedIps: [],
      persistentKeepalive: null,
    },
    validationSchema: Yup.object().shape({
      fromInterfaceId: Yup.string()

const NewHostView = ({ networkId }) => {
  const navigate = useNavigate()

  const formik = useFormik({
    initialValues: {
      name: null,
      labels: [],
      advertiseAddress: null,
    },
    validationSchema: Yup.object().shape({
      name: Yup.string()
        .required()
        .nullable(),
      advertiseAddress: Yup.string().nullable(),
    }),
  })

  const [createHost, createHostMutation] = useMutation(CREATE_HOST, {