Tengo una api que se llama así:

 http://localhost:5000/record/gopa

y devuelve los datos en este formato JSON

 {"pid":{ "ck":"F1965121910:265.522.5788.37", "name":"gopa", "cID":"MVOE9BW5ZZOC"} }

Quiero llamar a esto desde una función React Details2() que se llama desde un enrutador como este:

 import Details2 from "./components/Details2"; const App = () => { return ( <div> <Navbar /> <Routes> <Route exact path="/" element={<RecordList />} /> <Route path="/singlerecord/:id" element={<RecordList1 />} /> <Route path="/details2/:id" element={<Details2 />} /> </Routes> </div> ); };

el parámetro :id debe pasarse a la función Detalles2()
Esta función se encuentra en el archivo /components/Details2.js y se llama correctamente.
He reducido el archivo Details2.js a lo esencial y contiene

 import React from "react"; import { useParams, useNavigate } from "react-router"; export default function Details2() { const params = useParams(); let z = fetch(`http://localhost:5000/record/${params.id.toString()}`).then((response) => { return response.json(); }) let cname = z.pid.name return ( <div> <h3>Details2</h3> {params.id.toString()} </div> ); }

Estoy tratando de acceder al contenido de los datos que ha devuelto la llamada para su posterior procesamiento, pero no puedo acceder a ellos en ninguna variable, como cname , que se muestra aquí. No hay salida disponible, ni siquiera el encabezado.
Si elimino la asignación, el programa funciona correctamente, muestra el HTML que se devuelve, incluido el valor de params.id.toString() que se pasa correctamente desde el enrutador.
Mi simple pregunta es poder acceder a los valores individuales de las diversas claves que se devuelven desde la API. Por favor ayúdame con el código que se requiere.
He visto este artículo donde hacen algo similar. Sin embargo, en este caso están usando una clase pero no pude encontrar una manera de pasar parámetros a una clase, como estoy haciendo en el caso de la función Detalles2().