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;