{() => {
    const ColorDiv = createComponent(
      ({ hovered }) => ({
        backgroundColor: hovered ? 'lightblue' : 'white',
        padding: 10,
      }),
      'div',
      ['onMouseEnter', 'onMouseLeave'],
    )
    return (
      <HoverIntersection>
        {({ bind, hovered }) => (
          <ColorDiv {...bind} hovered={hovered}>
            <p>parent div
            <HoverIntersectionExclude>
              {({ bind, hovered }) => (
                <ColorDiv {...bind} hovered={hovered}>
                  child div
                </ColorDiv>
              )}
            </HoverIntersectionExclude>
          </ColorDiv>
        )}
      </HoverIntersection>
    )
  }}
</Playground>