react-use-gesture basic example in typescript gives types error

I'm trying to use this drag animation in typescript https://codesandbox.io/s/viewpager-sq9ud

And I'm stuck at this line:

set((i) => { 
    if (i < index.current - 1 || i > index.current + 1)
        return { display: 'none' };
    const x = (i - index.current) * window.innerWidth + (down ? mx : 0);
    return { x, display: 'block' };` 
});

And it gives me this error:

No overload matches this call. Overload 1 of 2, '(ds: Partial> | undefined; onRest?(ds: Partial>): void; }>>): void', gave the following error. Value of type '(i: any) => { display: string; x?: undefined; } | { x: number; display: string; }' has no properties in common with type 'Partial> | undefined; onRest?(ds: Partial>): void; }>>'. Did you mean to call it? Overload 2 of 2, '(i: number): Partial> | undefined; onRest?(ds: Partial>): void; }>>', gave the following error. Argument of type '(i: any) => { display: string; x?: undefined; } | { x: number; display: string; }' is not assignable to parameter of type 'number'.ts(2769) Carousel.tsx(127, 11): Did you mean to call this expression?

How should this set function look in typescript?

Thanks!