I’m using React-Insta-Stories package and using the stories as a full page solution with a nav bar on the side to toggle between a different arrays of images/videos depending on what’s clicked. I’m using a state variable for the stories prop to control this.

The issue I’m having is that once I click on a new nav item, it correctly renders the new story items from the corresponding array but the index starts from where the previous one left off, instead of starting from the beginning. I’ve tried setting the currentIndex to 0 so that it will always reset on click but no luck there.

Nav Items:

<li className='active:border-blue-400'>
            <button className="pointer-events-auto opacity-50 hover:opacity-100 active:text-white"
              onClick={
                () => {
                  setStoryState(Press);
                  setCurrentId(0)
                }
              }>
              <span className="w-12">001</span>
              <span className='w-12 ml-1 mr-1'>-</span>
              <span>HOME</span>
            </button>
          </li>
          <li>
            <button className="pointer-events-auto opacity-50 hover:opacity-100" 
            onClick={
                () => {
                  setStoryState(Archive);
                  setCurrentId(0)
                }
              }>
              <span className="w-12">002</span>
              <span className='w-12 ml-1 mr-1'>-</span>
              <span>ARCHIVE</span>
            </button>
          </li>

Stories:

const Home = ({storyView, currentId}) => {
    
    /*const [currentId, setCurrentId] = useState(0);*/
    return (
        <Stories className='bg-black'
            currentIndex={currentId}
            loop
            keyboardNavigation
            defaultInterval={8000}
            stories={storyView}

            width={'100vw'}
            height={'100vh'}
        />
    );
}