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

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,
    },
    validationSchema: Yup.object().shape({
      name: Yup.string()

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(),
      toInterfaceId: Yup.string()
        .required()

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 getHostQuery = useQuery(GET_HOST, {