I know there is a scoping issue here. I just can't find it. Why is 'items' null in the `searchItems()` block?

```
export const useStore = () => {
   const [items, setItems] = useState(null)

   const setItemsFromApi = () => {
      //call api to get data, then
      setItems(data)
   }

   const searchItems = (query) => {
      //use the local data and filter based on query
      //'items' IS NULL IN THIS SCOPE
      items.filter(() => {})
   }

   console.log(items) // 'items' HAS UPDATED VALUE AFTER setItemsFromApi() IN THIS SCOPE

   return {setItemsFromApi, searchItems}
}

```

Use store like this. (NOTE: I left out the rendering of the items in the list because that part works fine. Just focusing on why the onClick doesn't use the already loaded items to filter with.)

```
export default function DataList(props) => {     
   const store = useStore();

   useEffect(() => {
      store.setItemsFromApi()
   }, [])

   const runSearch = (query) => {
      store.searchItems(query)
   }

   return <button onClick={runSearch('searchTerm')}   
 }

```

I even tried passing it as a callback dependency, but it's still null

```
const searchItems = useCallback((query) => {
    //'items' IS STILL NULL IN THIS SCOPE
    items.filter(() => {})
 }, [items])

```