title: How to set item in localSorage in realtime
body: <p>I'm trying to build a child array nested into a data array,
  onClick user inputs don't get saved in localStorage in realtime, but</p>
  <p>For example
  there are 4 Buttons with 4 different  user input
  1,2,3,4
  If the user clicks on 1, later click on 2 then the input of choice 1 gets into local storage, which means my function doesn't set it in real-time until the user clicks the next event or twice.</p>
  <p>Related states</p>
  <pre><code>const deviceReport = localStorage.getItem('deviceReport') ? JSON.parse(localStorage.getItem('deviceReport')) : []  // this is in the parent component
  const [data, setData] = useState(deviceReport) // this one placed in parent component and I'm passing in child component as parameter. 
  const [childData, setChildData] = useState([]
  </code></pre>
  <p>) // That state is placed in the child component</p>
  <p>childArrayHandler</p>
  <pre><code>const childArrayHandler = (sub, questionId) =&gt; {
      const hasId = childData.find(({ id }) =&gt; sub.id === id)
      // copy data to mutable object
  
      if (!hasId) {
        let newData = [...childData]
        newData = [...newData, { id: sub.id, sub_question: sub.sub_question, weightage: sub.weightage }]
        setChildData(newData)
      }
      //  find parent of the child
      const parent = data.find(({ parentId }) =&gt; questionId === parentId)
      // find index of parent
      const indexOfParent = data.indexOf(parent)
      // update data with child related to parent
      let newData = [...data]
      newData[indexOfParent].child = childData
      localStorage.setItem('deviceReport', JSON.stringify(newData)) // Here is a issue , 
      onDataChange(newData) // Updating the data in parent component state of data
    }
  </code></pre>
  <p>I want to update <code>deviceReport</code> which is in the <code>localStorage</code>, using the <code>childArrayHandler</code> function
  This line</p>
  <pre><code>localStorage.setItem('deviceReport', JSON.stringify(newData))
  </code></pre>
  <p>Dosnt updated the storage in realtime and until user presses twice or click on another button in the option. Please help me to fix this.</p>