title: Having trouble returning function in custom React hook
body: <p>I am currently trying to create a <code>useRadioList()</code> hook that keeps track of an <code>isExpanded</code> prop on all the children in a given component (When one child toggles <code>isExpanded</code>, the other children un-toggle)</p>
  
  <p>The way I've gone about doing this has been to:</p>
  
  <ol>
  <li>Setup initial state by creating a list of false values with the same length as children</li>
  <li>Map this state to each child's <code>isExpanded</code> prop</li>
  <li>Declare and return a toggle function that manipulates the state of the initial list</li>
  </ol>
  
  <pre><code>// useRadioList.jsx
  import React, { Children, isValidElement, cloneElement, useState, useEffect } from "react"
  
  export default (children, allowMultiple = true) =&gt; {
  
  
  // 1) Setup initial list 
  
    const [radioList, setRadioList] = useState(Array(children.length).fill(false))
  
  // 2) Map radioList values to component children on initial render, and do so again if radioList changes
  
    useEffect(() =&gt; {
  
      Children.map(children, (child, idx) =&gt; {
        if (!isValidElement(child)) {return}
  
        return cloneElement(child, {isExpanded: radioList[idx]})
      })
    }, [radioList])
  
  
  
  // 3) Declare "toggle()" to modify the list that keeps track of what indexes are active
  
    const toggle = (targetIndex) =&gt; {
  
      let newList = radioList.map((item, idx) =&gt; {
        if (allowMultiple) {
          return targetIndex == idx ? !item : item
        } else {
          return targetIndex == idx ? !item : false
        }
      })
      setRadioList(newList)
    }
  
    return toggle
  }
  
  // expected:  const toggle = useRadioList(children)
  </code></pre>
  
  <p>When I call toggle I get the following error: </p>
  
  <blockquote>
    <p>Warning: State updates from the useState() and useReducer() Hooks
    don't support the second callback argument. To execute a side effect
    after rendering, declare it in the component body with useEffect().</p>
  </blockquote>
  
  <p><strong>Edit:</strong></p>
  
  <p><code>setRadioList(...newList) ----&gt; setRadioList(newList)</code></p>
  
  <p>No longer getting the <code>callback</code> error, it seems now I am having trouble effectively mapping state to children as the <code>isExpanded</code> prop does not show up in each child after the initial render.</p>