React Hooks in a different file?

Hey guys, in the process of learning hooks (never got around to it), and was wondering how I can add these functions in their own file and then call them in my app.js.

I have these two pieces of state:

  const [userId, setUserId] = useState('')
  const [token, setToken] = useState('')

And I have localStorageHelpers.js. I thought about an object at first, but then maybe a function of either one of these ways, but of course the pieces of state are undefined.

const storageHelpers = {
  // Creates token from admin and stores in local storage
  storeToken: (userId, token) => {
    localStorage.setItem('userId', JSON.stringify(userId))
    localStorage.setItem('token', token)
  },
  // Grab token on reload if it exists and set to state
  getToken: () => {
    const userId = localStorage.getItem('userId')
    const token = localStorage.getItem('token')
  
    setUserId(userId || "")
    setToken(token || "")
  },
  // Admin Logout
  logoutClick: () => {
    setUserId('')
    setToken('')
    localStorage.clear()
  }
}

export default storageHelpers

OR

const storageHelpers = () => {
  // Creates token from admin and stores in local storage
  const storeToken = (userId, token) => {
    localStorage.setItem('userId', JSON.stringify(userId))
    localStorage.setItem('token', token)
  }

  // Grab token on reload
  const getToken = () => {
    const userId = localStorage.getItem('userId')
    const token = localStorage.getItem('token')

    setUserId(userId || "")
    setToken(token || "")
  }

  // Admin Logout
  const logoutClick = () => {
    setUserId('')
    setToken('')
    localStorage.clear()
  }
}

I know I’d be calling them like storageHelpers.logoutClick()
Any guidance is appreciated. Thanks!