const parentRef = React.useRef()

// The virtualizer
const rowVirtualizer = useVirtualizer({
	count: items.length,
	getScrollElement: () => parentRef.current,
	estimateSize: () => 40,
})

const rows = new Array(10000)
	.fill(true)
	.map(() => 25 + Math.round(Math.random() * 100))

 [.....]

 return(
		<div
			id={"condition-list"}
			ref={parentRef}
			className="List"
			style={{
				height: `400px`,
				width: `400px`,
				position: 'absolute',
				overflow: 'auto',
				backgroundColor: 'white',
				zIndex: 200,
			}}
		>
			<div
				id={'list-item-a'}
				style={{
					height: `${rowVirtualizer.getTotalSize()}px`,
					width: '100%',
					position: 'relative',
				}}
			>
				{rowVirtualizer.getVirtualItems().map((virtualRow) => (
					<div
						id={'list-item-b'}
						key={virtualRow.index}
						className={virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
						style={{
							position: 'absolute',
							top: 0,
							left: 0,
							width: '100%',
							height: `${rows[virtualRow.index]}px`,
							transform: `translateY(${virtualRow.start}px)`,
							margin: '8px',
							padding: '8px'
						}}
					>
						{items[virtualRow.index].condition_name}
					</div>
				))}
			</div>
		</div>
  )