title: How to add a Text inside a Draw Polygon React
body: <p>I'am using this code to draw polygons over a background image, like below image.
  How to add a Text inside, in the middle of the Polygon ?</p>
  <p>I've been trying to use  <code>&lt;Text&gt;</code> without success.</p>
  <pre><code>  {polygon.map((item, index) =&gt; (
            &lt;React.Fragment key={item.name.toString() + index.toString()}&gt;
                &lt;DrawedPath
                  style={{ fill: colorSelected, stroke: strokeSelected }}
                  key={index.toString() + item.name.toString()}
                  d={`M${item.points[0].x} ${item.points[0].y} ${item.points.slice(1).reduce((prev, curr) =&gt; {
                    return `${prev} L${curr.x} ${curr.y}`
                  }, '')} L${item.points[0].x} ${item.points[0].y}`}
                /&gt;
             &lt;/React.Fragment&gt;
          ))}
  
  const DrawedPath = styled.path`
    stroke-width: 1px;
    stroke: #05f9e2;
    fill: transparent;
  `
  </code></pre>
  <p><a href="https://i.stack.imgur.com/4jAJz.png" rel="nofollow noreferrer">https://i.stack.imgur.com/4jAJz.png</a></p>