title: Maintaining previously selected item state in stepper
body: <p>I'm working with a Material UI stepper wherein each step returns a list of selected items.</p>
  <p>In each step, the user can click an item that is highlighted before moving onto the next step.</p>
  <p>The results are mapped in a separate component.</p>
  <pre><code>const [clicked, setClicked] = useState(undefined);
  
  const selectStyleAndFilter = (item, index) =&gt; {
          setClicked(index);
          selectedItems[activeStep] = item;
      };
  
      const handleBack = () =&gt; {
          setActiveStep(activeStep - 1);
          setClicked(undefined);
  
          if (activeStep === 1) {
              nextStep(selectedItems).then(products =&gt; {
                  console.log(
                      'productCount back',
                      products.data.data.contents.total
                  );
                  setActiveStep(activeStep - 1);
                  setClicked(undefined);
                  setProductCount(
                      products.data.data.contents.total === undefined
                  );
              });
          }
      };
  </code></pre>
  <p>However, when I click the back button to return to the previous step, the item is no longer highlighted.</p>
  <p>I tried using the logic from <code>selectStyleAndFilter</code> in the <code>handleBack</code> function to keep the item in state:</p>
  <pre><code>   const handleBack = (item, index) =&gt; {
          setActiveStep(activeStep - 1);
          setClicked(index);
          selectedItems[activeStep] = item;
  </code></pre>
  <p>How can I keep the <code>setClicked</code> state of the previous item applied in the <code>handleBack</code> function?</p>