Trying to figure out the types for the style object in 'renderThumbVertical'

[mdodge-ecgrow]

I'm struggling here to figure out the correct types for the style object that gets passed to renderThumbVertical. This is my current code:

...
type ThumbVerticalBaseStyles = {
        backgroundColor: string;
        borderRadius: string;
        cursor: string;
        display: string;
        height: string;
        position: string;
    };
    const thumbVertical = ({
        style = {} as ThumbVerticalBaseStyles,
        ...props
    }) => {
        const finalStyle = {
            ...style,
            visibility: 'hidden'
        };

        return <div style={finalStyle} {...props} />;
    };

    return (
        <div className={'table-container wide'}>
            <header>
                <h3>{customers.length} Customers</h3>
            </header>
            <Scrollbars
                autoHeight
                autoHeightMin={0}
                autoHeightMax={'calc(100vh - 40px)'}
                renderThumbVertical={thumbVertical}
...

Now on that line return <div style={finalStyle} {...props} />;, I am getting the following error: TS2322: Type '{ visibility: string; backgroundColor: string; borderRadius: string; cursor: string; display: string; height: string; position: string; }' is not assignable to type 'Properties<string | number, string & {}>'.   Types of property 'position' are incompatible.     Type 'string' is not assignable to type 'Position | undefined'. index.d.ts(1850, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

[JhonSJ]

@mdodge-ecgrow Your type for the position property is string but, the style property has the type position as Position | undefined, change your type or use CSSProperties

type ThumbVerticalBaseStyles = {
    backgroundColor: string;
    borderRadius: string;
    cursor: string;
    display: string;
    height: string;
    **position: string;**
};

type ThumbVerticalBaseStyles = React.CSSProperties;