How to use the effector-react.useStore function in effector-react

const AvatarSection = () => {
  const avatarUrl = useStore($avatarUrl)

  return (
    
      
        
        
      
    
  )
}

export const CardsHomePage = () => {
  const ids = useStore($cardsIds)
  const isLoading = useStore(homeCardsFetching.isLoading)

  React.useEffect(() => {
    pageReady()
  }, [])

  return (
    }>
       <p>What about to create new card?</p>}
      /&gt;
    
  )
}

const Title = () => {
  const title = useStore($title) || ""
  const titleRef = React.createRef()

  React.useEffect(() => {
    if (titleRef.current) {
      titleRef.current.focus()
    }
  }, [])

  return (

export const CardViewPage = ({ match }: Props) => {
  const cardId = parseInt(match.params.cardId, 10)

  React.useEffect(() => {
    cardLoading({ cardId })
  }, [cardId])

  const current = useStore($card)

  return (
    }>
      {current ? (
        
      ) : (
        
      )}
    
  )
}

export const UserPage = ({ match }: Props) => {
  const [tab, setTab] = React.useState<"created" | "useful">("useful")
  const userId = parseInt(match.params.userId, 10)

  const user = useStore($user)
  const { created, useful } = useStore($cards)
  const isLoading = useStore($isLoading)
  const isFailed = useStore($isFailed)
  const error = useStore($error)

  React.useEffect(() => {
    pageMounted({ userId })
  }, [userId])

  if (isFailed)
    return 

  return (
    }>
       setTab("useful")}>
        Useful
      
      |

const RegisterForm = () => {
  const form = useStore($form)
  const formError = useStore(registerFetching.error)
  const isSubmitEnabled = useStore($isSubmitEnabled)

  return (
    <form>
      
        <h2>Registration to HowToCards</h2>
        {formError &amp;&amp; (
          {mapServerToClientError(formError.error)}
        )}
      
      
      
      
        Create account
      
    
  )</form>

const Password = () => {
  const password = useStore($password)
  const isFormDisabled = useStore($isFormDisabled)
  const passwordError = useStore($passwordError)

  return (
    <input value="{password}" disabled="{isFormDisabled}" label="Password" autocomplete="password" name="password" type="password">
  )
}

export const CardsHomePage = () => {
  const ids = useStore($cardsIds)
  const isLoading = useStore(homeCardsFetching.isLoading)

  React.useEffect(() => {
    pageReady()
  }, [])

  return (
    }>
       <p>What about to create new card?</p>}
      /&gt;
    
  )
}

export const TabsView = () => {
  const tab = useStore(_tab)
  const flowToggle = useStore(_flowToggle)
  return (
    <>
      
        
          
          
        
        {flowToggle && }
        
        
        
      
      {tab === 'graphite' && }
      <div style="{{visibility:"></div>

const ChangeAvatar = () => {
  const [opened, setOpened] = React.useState(false)
  const gravatarEmail = useStore($avaEmail)
  const isDisabled = useStore($isDisabled)
  const isChanged = useStore($avaEmailChanged)

  const isSaveDisabled = isDisabled || !isChanged

  const cancel = React.useCallback(
    (event) => {
      setOpened(false)
      gravatarChangeCancelled(event)
    },
    [setOpened],
  )

  const save = React.useCallback((event) => {
    event.preventDefault()
    gravatarEmailSubmitted(event)
    setOpened(false)
  }, [])