title: Why jetpack compose elevation clip my shadow?
body: <p>I have a problem with jetpack compose elevation render. I'm trying to add elevation on Surface but my UI seems to with clipped shadow. Also, how can I add a colorful shadow on my Surface?</p>
  <p>See the below on the screenshot
  <a href="https://i.stack.imgur.com/ZCkrs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZCkrs.png" alt="enter image description here" /></a></p>
  <pre><code>@Composable
  fun DiscoverItem() {
      Surface(
          contentColor = Color(0xFFFFFFFF),
          modifier = Modifier.preferredWidthIn(min = 145.dp).preferredHeight(56.dp),
          shape = CircleShape,
          elevation = 8.dp,
      ) {
          Row(
              modifier = Modifier.fillMaxSize().padding(horizontal = 8.dp),
              verticalAlignment = Alignment.CenterVertically
          ) {
              Surface(
                  modifier = Modifier.preferredSize(40.dp),
                  shape = CircleShape,
                  color = Color(0xFFFFC3D8)
              ) {
                  Image(
                      imageResource(R.drawable.pin_icon),
                      modifier = Modifier.size(width = 18.dp, height = 24.dp),
                      contentScale = ContentScale.Fit
                  )
              }
              Spacer(modifier = Modifier.padding(start = 10.dp))
              Text(
                  &quot;YOUR AREA&quot;,
                  style = MaterialTheme.typography.body2,
                  color = Color(0xFFFC1055)
              )
          }
      }
  }
  
  @Composable
  @Preview
  fun DiscoverItemPreview() {
      DiscoverItem()
  }
  </code></pre>