Изменение флага при скролинге списка

Может кто сталкивался с таким или подскажет в какую сторону смотреть Проблема заключается в том что: Есть список элементов(динамичный) и есть окно определенного размера. Можно ли реализовать случай что бы при скроллинге этого списка менялся флаг на true у элементов которые видны.

 let arr = [
    { 1: 2, flag: true },
    { 1: 3, flag: false },
    { 1: 4, flag: false },
    { 1: 5, flag: false },
    { 1: 6, flag: false },
    { 1: 7, flag: false },
    { 1: 8, flag: false },
    { 1: 9, flag: false },
    { 1: 10, flag: false },
    { 1: 11, flag: false },
    { 1: 12, flag: false },
    { 1: 13, flag: false },
    { 1: 14, flag: false },
  ];
  return (
    <div
      style={{
        width: '100px',
        overflow: 'scroll',
        height: '60px',
      }}
    >
      {arr.map((el) => (
        <div key={el[1]}>
          <div style={{backgroundColor: `${el.flag ? 'green' : 'red'}`, margin: '5px 0'}}>{el[1]}</div>
        </div>
      ))}
    </div>
  );

Есть ссылка для общего представления проблемы https://stackblitz.com/edit/react-ux1rre?file=src/App.js

Спасибо за любой совет.