How to find the first element hidden when overflow-y is hidden?

I have a container div and multiple child elements. And have set overflow-y hidden for the container. Now I would like to find the first element which is hidden through vanilla javascript

I have tried getting computed property of the child element to see whether they have display -> none. all of them are block.

calView() {
    const wrapper = document.querySelector(".chunks-bar-wrapper");
    const fourthElement = wrapper.querySelector('div[data-id="4"]');
    console.log(fourthElement);
    console.log(window.getComputedStyle(fourthElement));
  }
  componentDidMount() {
    window.addEventListener("resize", this.calView);
  }
  componentWillMount() {
    window.removeEventListener("resize", this.calView);
  }
  render() {
    const { labelList } = this.props;
    return (
      <div className="wrapper">
        {labelList.map((label, index) => (
          <div className="tab" key={index} data-id={index}>
            {label}
          </div>
        ))}
      </div>
    );
  }