getting typescript annotations error when adding annotations in react for chartjs

Question

I am able to see the annotations on the graph. but typescript is throwing below error

Type '{ plugins: { annotation?: { annotations: { annotation: { type: string; scaleID: string; borderWidth: number; borderDash: number[]; borderColor: string; value: number | undefined; position: string; label: { ...; }; }; }; } | undefined; legend: { ...; }; tooltip: { ...; }; }; responsive: boolean; scales: { ...; }; }' is not assignable to type '_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>'.
  The types of 'plugins.annotation' are incompatible between these types.
    Type '{ annotations: { annotation: { type: string; scaleID: string; borderWidth: number; borderDash: number[]; borderColor: string; value: number | undefined; position: string; label: { position: string; ... 4 more ...; font: { ...; }; }; }; }; } | undefined' is not assignable to type '_DeepPartialObject<AnnotationPluginOptions> | undefined'.
      Type '{ annotations: { annotation: { type: string; scaleID: string; borderWidth: number; borderDash: number[]; borderColor: string; value: number | undefined; position: string; label: { position: string; ... 4 more ...; font: { ...; }; }; }; }; }' is not assignable to type '_DeepPartialObject<AnnotationPluginOptions>'.
        Types of property 'annotations' are incompatible.
          Type '{ annotation: { type: string; scaleID: string; borderWidth: number; borderDash: number[]; borderColor: string; value: number | undefined; position: string; label: { position: string; backgroundColor: string; color: string; content: string; display: boolean; font: { ...; }; }; }; }' is not assignable to type '_DeepPartialArray<AnnotationOptions<keyof AnnotationTypeRegistry>> | _DeepPartialObject<Record<string, AnnotationOptions<keyof AnnotationTypeRegistry>>> | undefined'.
            Type '{ annotation: { type: string; scaleID: string; borderWidth: number; borderDash: number[]; borderColor: string; value: number | undefined; position: string; label: { position: string; backgroundColor: string; color: string; content: string; display: boolean; font: { ...; }; }; }; }' is not assignable to type '_DeepPartialObject<Record<string, AnnotationOptions<keyof AnnotationTypeRegistry>>>'.
              Property 'annotation' is incompatible with index signature.
                Type '{ type: string; scaleID: string; borderWidth: number; borderDash: number[]; borderColor: string; value: number | undefined; position: string; label: { position: string; backgroundColor: string; color: string; content: string; display: boolean; font: { ...; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "line"; } & LineAnnotationOptions> | _DeepPartialObject<{ type: "label"; } & LabelAnnotationOptions> | ... 4 more ... | undefined'.
                  Type '{ type: string; scaleID: string; borderWidth: number; borderDash: number[]; borderColor: string; value: number | undefined; position: string; label: { position: string; backgroundColor: string; color: string; content: string; display: boolean; font: { ...; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "line"; } & LineAnnotationOptions>'.
                    Types of property 'type' are incompatible.
                      Type 'string' is not assignable to type '"line"'.

This page talks about adding the static types. the steps are not clearly explained.

https://www.chartjs.org/docs/latest/developers/plugins.html

can someone share the detailed steps to add static types.