() => {
  const invisibleStyles = {
    position: 'absolute',
    left: 0,
    pointerEvents: 'none',
    visibility: 'hidden',
  };
  const containerElementRef = React.useRef(null);
  const overflowElementRef = React.useRef(null);
  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(
    containerElementRef.current,
    overflowElementRef.current,
  );
  const elements = ['Element 1', 'Element 2', 'Element 3', 'Element 4', 'Element 5', 'Element 6', 'Element 7'];
  
  const children = useMemo(() => {
    const indexOfOverflowStart = indexOfLastVisibleChild + 1;
    const childrenList = elements.map((element, i) => (
      <div
        key={element}
        className="px-4 pt-2"
        style={i >= indexOfOverflowStart ? invisibleStyles : {}}
      >
        {element}
      </div>
    ));

    const overflowChildren = elements.slice(indexOfOverflowStart)
      .map(overflowChild => (
        <Dropdown.Item key={`${overflowChild}-overflow`}>
          {overflowChild}
        </Dropdown.Item>
      )
    );

    const MoreDropdown = (
        <Dropdown ref={overflowElementRef} style={!overflowChildren.length ? invisibleStyles : {}} key="overflow-example">
        <Dropdown.Toggle
          variant="link"
          id="more-toggle"
        >
          More...
        </Dropdown.Toggle>
        <Dropdown.Menu className="dropdown-menu-right">{overflowChildren}</Dropdown.Menu>
      </Dropdown>
    )

    childrenList.push(MoreDropdown);

    return childrenList;
  }, [indexOfLastVisibleChild]);

  return (
    <div className="d-flex" ref={containerElementRef}>
      {children}
    </div>
  )
};