How to use the @elastic/charts.getAnnotationId function in @elastic/charts

export const Anomalies: FC = ({ anomalyData }) => {
  const anomalies = anomalyData === undefined ? [] : anomalyData;
  const severities: Severities = splitAnomalySeverities(anomalies);

  return (

export const Anomalies: FC = ({ anomalyData }) => {
  const anomalies = anomalyData === undefined ? [] : anomalyData;
  const severities: Severities = splitAnomalySeverities(anomalies);

  return (
    
      
      

);
};

id={getAxisId('discover-histogram-bottom-axis')}
          position={Position.Bottom}
          title={chartData.xAxisLabel}
          tickFormat={this.formatXValue}
          ticks={10}
        />
        
        
        
      
    );

);
};

export const Anomalies: FC = ({ anomalyData }) => {
  const anomalies = anomalyData === undefined ? [] : anomalyData;
  const severities: Severities = splitAnomalySeverities(anomalies);

  return (
    
      
      

const severityConfigs: Record = {
  warning: {
    annotationId: getAnnotationId(`anomalies-warning`),
    style: { fill: 'rgb(125, 180, 226)', opacity: 0.7 },
  },
  minor: {
    annotationId: getAnnotationId(`anomalies-minor`),
    style: { fill: 'rgb(255, 221, 0)', opacity: 0.7 },
  },
  major: {
    annotationId: getAnnotationId(`anomalies-major`),
    style: { fill: 'rgb(229, 113, 0)', opacity: 0.7 },
  },
  critical: {
    annotationId: getAnnotationId(`anomalies-critical`),
    style: { fill: 'rgb(228, 72, 72)', opacity: 0.7 },
  },
};

const renderAnnotations = (
  annotations: Record,
  chartId: string,
  renderAnnotationTooltip?: (details?: string) => JSX.Element
) => {
  return Object.entries(annotations).map((entry, index) => {
    return (

{actualThreshold.map((_value: any, i: number) => {
              const specId = i === 0 ? 'threshold' : `threshold${i}`;
              return (
                
              );
            })}