Как сделать active для разных компонентов?

Question

[YAHEFID]

Есть компонент ItemsList:

import React from 'react'
const ItemsList = ({items}) => {
  return (
    <ul className="items">
      {items.map(({comment}, index) => (
         <li 
            key={index} 
            className="item"
            >{comment}
         </li>
      ))}
    </ul>
  )
}

export default ItemsList

Использую я его так:

const Viem = () => {
  const obj = {
    test1: [
      {comment: 1},
      {comment: 2}
    ],
    test2: [
      {comment: 1},
      {comment: 2},
      {comment: 3}
    ]
  }

  return (
    <div className="content">
      <ItemsList items={obj.test1} />
      <ItemsList items={obj.test2} />
    </div>
  );
};

Я хочу сделать возможность кликать по этим item и добавлять им класс active. Но, как мы видим, у нас компонент один, а передается два разных объекта и нужно что-бы у каждого был свой active. Как это правильно сделать? Для тех, кто не понял о чем я написал: скажем у нас есть киносайт, у него есть сериал и при просмотре сериала у нас есть возможность сменить серию или сезон. Да, у некоторых это разные компоненты, по дизайну это можно понять. Но представим, что задача у нас такая, что компонент у нас один, а реализацию нужно сделать по нему две. Использовать я хочу redux и сохранять там текущий active для первого компонента и второго))

Этот объект который передается в компоненты, он будет браться так же из redux. Это я для себя просто сделал, чтобы тестить)))