Trying to create a Polar/Radar Chart, I want to create separate slices of the first circle based on the length of the array items. And print each item.name in each slice equally and text style in Arc. Circle width 720px and height 720px.

When I map through the array and print names, it creates a separate circle for each name because I am mapping outside the dev.

Any ideas, solutions are appreciated. Thanks

    const items = [{ "id": 1, "name": "javascript" }, { "id": 2, "name": "HTML" }, { "id": 1, "name": "CSS" }]
    const length = items?.length ?? 0
    const width = 720
    const slice = width / length
     
    return (
            <div>
              { items?.map(item =>
              <div className={styles.circle} style={{width: `${slice}}}>
                <p>{item.name}</p>
              </div>
               )}
            </div>
    )

    //css
    .circle {
       height: 720px;
       border: solid 1px #fafafa;
       background: #fafafa;
       border-radius: 50%;
       padding: 20px;
       position: relative;
     }