In my user interface, I want to display data per neighborhood via a pie chart, whereby different age groups correspond to different pieces of the pie chart. Relevant code:

import { setDefaultOptions, loadModules } from "esri-loader";
import PieChartRenderer from "@arcgis/core/renderers/PieChartRenderer.js";


const buurten_2023_v1_age = new FeatureLayer({
  id: "buurten_2023_v1_age",
  url: "https://services.arcgis.com/zmBQLV64TsFvEpV0/arcgis/rest/services/buurten_2023_v1_age/FeatureServer",
  spatialReference: { wkid: 28992 },
  hasZ: false,
  outFields: ["BU_NAAM", "P_00_14_JR", "P_15_24_JR"],
  renderer: new PieChartRenderer({
    size: 10,
    attributes: [
      {
        color: [255, 69, 0, 0.4],
        label: "Perc 0-14",
        field: "P_00_14_JR",
      },
      {
        color: [255, 69, 255, 0.4],
        label: "Perc 15-24",
        field: "P_15_24_JR",
      },
     ],
     outline: {
      width: 1.5,
      color: "white",
     },
    }),
  });

I also have "@arcgis/core": "^4.30.8" in my package.json

Currently, the pie chart visualization does not work. In the console, I get:

4.18/:73  [esri.core.Accessor] Accessor#set Invalid property value, value needs to be one ,
of 'esri.renderers.HeatmapRenderer', 'esri.renderers.SimpleRenderer', 
'esri.renderers.UniqueValueRenderer', 'esri.renderers.ClassBreaksRenderer', 
'esri.renderers.DotDensityRenderer', 'esri.renderers.DictionaryRenderer', or a plain object
 that can autocast (having .type = 'heatmap', 'simple', 'unique-value', 'class-breaks', 
'dot-density', 'dictionary')

How can I fix this problem, so that the pie charts render correctly in the user interface.