TypeScript issues

[reintroducing]

I'm new to TypeScript so pardon my ignorance, but I've got a relatively basic Chart component in our UI library that wraps react-chartjs-2 and forwards a ref (I'm not sure how important that information is to this issue, however) which is then installed into a project via a private npm registry. The registration of the Zoom plugin (along with another plugin, annotations) is done in an App component in the UI library as well which is then used to wrap the project application (similar to a Provider). Everything works as it should, except TypeScript is having a fit.

The Chart component takes the options in to pass through to chartjs and i'm adding the zoom options. It looks something like this (removed code that is not pertinent to this issue):

const chartRef = useRef<ChartJs<'line'>>(null);
const onZoomReset = () => {
    chartRef.current?.resetZoom(); // Error 1
};

<Chart
    ref={chartRef}
    options={{
        ...
        plugins: {
            legend: {display: false},
            zoom: { // Error 2
                zoom: {
                    drag: {
                        enabled: true,
                        ...(zoomBackground && {
                            backgroundColor:
                                zoomBackground.rgba,
                        }),
                        borderColor: getCustomProperty(
                            '--color-neutral-200'
                        ),
                        borderWidth: 1,
                    },
                },
            },
        },
        ...
/>

This produces multiple errors in TS.

Error 1

Property 'resetZoom' does not exist on type 'Chart<"line", (number | Point | null)[], unknown>'.ts(2339)

Error 2

Type '{ legend: { display: false; }; zoom: { zoom: { drag: { borderColor: string; borderWidth: number; backgroundColor?: string | undefined; enabled: true; }; }; }; }' is not assignable to type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'.
  Object literal may only specify known properties, and 'zoom' does not exist in type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'.ts(2322)

In looking through the chartjs docs, I found this on TypeScript Typings for plugins. The thing is, I see that you are already doing this in the typings here. I am able to get rid of error 2 by duplicating the declaration in my project's global.d.ts file but that seems counterintuitive and if the typings ever get updated, I'd have to manually update them in my file which I'd rather not do.

So, this begs some questions:

1. Why am I getting any TS errors at all if the module is already declared through your typings?
2. Do I need to do something special in my project to incorporate those typings so that they are picked up?
3. How do I fix the resetZoom error, which does not get fixed even if I re-define the module declaration in my project. The ref on the chart is created according to the docs of react-chartjs-2.

Any clues on these issues or how to fix them would be greatly appreciated. I haven't been able to find many resources online otherwise.

[reintroducing]

Ok, so it seems like I was able to solve Error 2 by including this line in my global.d.ts file:

/// <reference types="chartjs-plugin-zoom" />

Error 1 is still happening and I'm not sure how to solve that.

[reintroducing]

sigh, disregard, that fixed both problems and my IDE just did not refresh. Apologies for the noise :)