O hook useDebugValue tem um uso muito simples, é usado para exibir um label ao lado do nome de um hook personalizado no React DevTools.

Exemplo. Em seu App.js faça:

import useTeste from "./hooks/useTeste";
import "./styles.css";

export default function App() {
  const [state, toggleState] = useTeste();

  return (
    <div className="App">
      <h1>isTeste: {state.toString()} </h1>
      <button onClick={toggleState}>Toggle state!</button>
    </div>
  );
}

Depois crie uma pasta hooks e dentro dela crie o arquivo useTeste.js:

import { useState, useDebugValue } from "react";

function useTeste() {
  const [state, setState] = useState(false);

  const toggleState = () => setState((v) => !v);

  return [state, toggleState];
}

export default useTeste;

Ótimo, agora você tem um hook personalizado. Ao executar você verá:

Se você estiver com a extensão React DevTools instalada no seu navegador clique em App e veja ao lado:

Muito bem, ai esta o nome do nosso hook personalizado, seu state e o valor na qual o state foi iniciado.

Agora vamos inserir o useDebugValue. No hook inseria useDebugValue("Label do useTeste"); antes do return. Ficará assim:

import { useState, useDebugValue } from "react";

function useTeste() {
  const [state, setState] = useState(false);

  const toggleState = () => setState((v) => !v);

  useDebugValue("Label do useTeste");

  return [state, toggleState];
}

export default useTeste;

Ao ir novamente no React DevTools, clicando em App, verá:

É isso! useDebugValue é isso!

Agora, da pra fazer um pouco mais, por exemplo, ele aceita uma segunda função para formatação desse label, dito isso, fica interessante fazer o seguinte:

import { useState, useDebugValue } from "react";

function useTeste() {
  const [state, setState] = useState(false);

  const toggleState = () => setState((v) => !v);

  const date = new Date();

  useDebugValue(date, (date) => date.toLocaleString("pt-br"));

  return [state, toggleState];
}

export default useTeste;

Você verá: