I have to display the audios actual time for books under most popular category.
I am saving my files on firebase and getting it as url. I dont have any other metadata saved to determine the duration the exact duration of fetched files.

            {/* Duration */}
            <Typography variant="body2" gutterBottom style={{ position: 'absolute', bottom: 0, left: 0, display: 'flex', alignItems: 'center' }}>
              <IconButton style={{ marginRight: '5px', marginLeft: '5px', marginTop: '5px' }} >
                <Headset />
              </IconButton>
              <span style={{ borderBottom: '1px solid #000', top: 10, flexGrow: 1, marginRight: '10px' }} />
             {19} min
            </Typography>

This useEffect i am using for fetching the books.

    useEffect(() => {
      const fetchRatings = async() => {
        const ratings: Record<string, number> = {};
        for (const product of products) {
          const avgRating = await getAverageRating(product.bk_ID);
          ratings[product.bk_ID] = avgRating;
        }
        setAverageRatings(ratings);
      }
      fetchRatings();
    }, 
)

    const sortedProducts = products.slice().sort((a,b) => {
      const ratingA = averageRatings[a.bk_ID] || 0;
      const ratingB = averageRatings[b.bk_ID] || 0;

      return ratingB - ratingA;
    })