First, we are going to adjust the UserBar component. Here, we can use the useUserState Hook by following these steps:

1. Edit src/user/UserBar.js and import the useUserState Hook:

import { useUserState } from '../hooks'

2. Then, we remove the following Hook definition:

    const { state } = useContext(StateContext)
    const { user } = state

3. We replace it with our custom useUserState Hook:

    const user = useUserState()

Now the UserBar component makes use of our custom Hook instead of directly accessing the user state.