TypeError: Cannot read properties of null (reading 'getBoundingClientRect')

[nathanburgess]

Getting this error when attempting to drag using a drag handler.

<List
  values={operations}
  onChange={({ oldIndex, newIndex }) => {
    onMoveOperation?.(operations[oldIndex], operations[newIndex]);
  }}
  renderList={({ children, props }) => <div {...props}>{children}</div>}
  renderItem={({ value: operation, props, isDragged }) => {
    return (
      <FilterRowWrapper {...props}>
        <FilterDragHandleWrapper data-movable-handle isDragged={isDragged}>
          <DragHandleIcon />
        </FilterDragHandleWrapper>
      </FilterRowWrapper>
    )
  }}
/>

operations always has some value and I cannot figure out what's causing this issue.

NB: This did work previously when using a component from Chakra, which we're in the process of stripping out of our project.

[nghieptiki]

@nathanburgess FilterRowWrapper should be wrapped by forwardRef

const FilterRowWrapper = forwardRef(funnction FilterRowWrapper(props, ref) {
return <div ref={ref}>...</div>
} )