Can anyone help me to understand the socket om events like consumer close transport close.

I am using react to build the frontend. I have achieved most of the things like joning rooms and sending screen, video and audio. the first issu that i face is to get the producer after calling produce on a transport.
async function produceMedia(transport: types.Transport, type: string, mediaOptions: types.AppData) {

let producer: types.Producer;
try {

  producer = await transport.produce(mediaOptions);
  if (!producer) return;

  producer?.on('trackended', () => {
    console.log("track ended");
  })

  producer?.on('transportclose', () => {
    console.log('transport ended')

    // close video track
  })
  type == "video" && setVideoProducer(producer);
  type == "audio" && setAudioProducer(producer);
  type == "screen" && setScreenProducer(producer);

  console.log("Producer made", producer.id);


} catch (error) {
  console.log(error);


}

}
The console.log(“Producer made”, producer.id) returns undefined;