Assign unique id to each repeated instance of <pattern> in SVG

Question

I want to fill some charts created with d3.js with custom patterns, and after the filling is complete, I want to allow users to edit each individual repeated instance in the pattern fill as needed. I believe this requires obtaining the ID of each instance. Here's a specific example:

I created a pie chart, and had one of the pie slices filled with a carrot pattern. Now, by dragging a slider, I can adjust the rotation direction of all the carrots.

    var data = [{ year: '2001', value:60 },
        { year: '2002', value:30 },
        { year: '2003', value:10 },
    ];

    var svg = d3.select("svg"),
        width = svg.attr("width"),
        height = svg.attr("height"),
        radius = Math.min(width, height) / 2,
        g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    // Generate the pie
    var pie = d3.pie().value(function(d) {
        return d.value;});

    // Generate the arcs
    var arc = d3.arc()
        .innerRadius(0)
        .outerRadius(radius);

    // Generate groups
    var arcs = g.selectAll("arc")
        .data(pie(data))
        .enter()
        .append("g")
        .attr("class", "arc");

    // Draw arc paths
    arcs.append("path")
        .attr("d", arc)
        .attr('stroke', "black")
        .attr('stroke-width', '1')
        .attr("fill", function(d, i) {
            if (d.data.year === '2001') return "url(#carrotPattern)";
            return "white";
        });

    const slider = document.getElementById("slider")

    const carrotIcon = document.getElementById("carrotIcon")

    slider.oninput = function(){

        carrotIcon.setAttribute('transform', 'rotate('+slider.value+' 25 25) translate(0 0)')
    }

<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script>

<svg width="400" height="400">
    <defs>
        <symbol id="carrot" viewBox="0 0 50 50" overflow="visible">
            <g id="carrotIcon">
                <path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
            </g>
        </symbol>

        <pattern id="carrotPattern" patternUnits="userSpaceOnUse" width="50" height="50" style="overflow:visible">
            <use xlink:href="#carrot" width="50" height="50" fill="orange"></use>
        </pattern>
    </defs>
</svg>

<p style=font-size:15px>Rotate Icons </p>
<input id="slider" type="range" min="0" max="360" value="0" step='1' >

However, I want the user to be able to select any one of the carrots by clicking on it, and then only adjust the rotation direction of that particular selected carrot. But I am unable to get or assign a unique id for each carrot.

Diagram of the expected result, the blue carrot is the selected one:

How can I achieve this? (The pie chart here is just an example; it could be other charts or shapes filled by repeated elements.)