how to use custom tracing of performance lib

[sbatikeri]

Our test team looking for UI render times and api response times. I have added performance lib but not sure how to implement custom trace. In our react-native app it has multiple class and functional components for one screen. I am not able find a way to track all UI render times and api responses.
--> Can some one share sample code how to implement customtrace.
--> Where can we see once we add custom traces.
--> Where can we see axios metrics on firebase dashboard.

sample code:
async function customTrace() {
// Define & start a trace
const trace = await perf().startTrace('custom_trace');

// Define trace meta details
trace.putAttribute('user', 'abcd');
trace.putMetric('credits', 30);

// Stop the trace
await trace.stop();
}
My code:
let appStartTrace:any;
export default class App extends React.Component{
async UNSAFE_componentWillMount(){
appStartTrace= await perf().startTrace('custom_app_start_trace');
appStartTrace.putAttribute('user', 'abcd');
appStartTrace.putMetric('credits', 30);
console.log("app Start")
}

async componentDidMount(){
await appStartTrace.stop();
console.log("app completed")
}

render() {
return (






);
}
}

rewrelic implementation:
https://blog.newrelic.com/engineering/measure-performance-metrics-in-react-native-apps/