d3js pie chart with rounded segments

I am trying to experiment with different styles for the d3.js charts I have — I am unsure how you would round the segments of the pie chart to mirror this design example.

Labels in rounded boxes, segments slightly gapped with rounded edges – in this design the segments have different heights maybe relating to the value?

https://codesandbox.io/p/sandbox/magical-wiles-forked-cxhmky

the current code for a regular pie

import React from 'react';
import * as d3 from 'd3';
import './PieChart1.scss';

class PieChart extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
        this.state = {
            data: [],
            theme: this.props.theme ? this.props.theme : ['#bde0fe', '#2698f9', '#71bcfd', '#f1f8fe']
        };
    }

    componentDidMount() {
        var $this = this.myRef.current;

        d3.select($this)
            .selectAll('svg')
            .remove();

        const data = this.props.data;

        const width = parseInt(this.props.width, 10),
            height = parseInt(this.props.height, 10),
            radius = parseInt(this.props.r, 10),
            innerradius = parseInt(this.props.ir, 10);

        var color = d3.scaleOrdinal().range(this.state.theme);

        var arc = d3
            .arc()
            .outerRadius(radius)
            .innerRadius(innerradius);

        data.forEach(function(d) {
            d.total = +d.value;
        });

        var pie = d3
            .pie()
            .sort(null)
            .value(function(d) {
                return d.total;
            });

        var svg = d3
            .select($this)
            .append('svg')
            .attr('width', width)
            .attr('height', height)
            .append('g')
            .attr('class', 'piechart')
            .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

        var segments = svg.append('g').attr('class', 'segments');

        var slices = segments
            .selectAll('.arc')
            .data(pie(data))
            .enter()
            .append('g')
            .attr('class', 'arc');

        slices
            .append('path')
            .attr('d', arc)
            .attr('fill', function(d, i) {
                return color(i);
            })
            .transition()
            .attrTween('d', function(d) {
                var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
                return function(t) {
                    d.endAngle = i(t);
                    return arc(d);
                }
            });

    }

    render() {
        return <div ref={this.myRef} className="PieChart" />;
    }
}
export default PieChart;