How to use the mobx-react-lite.useObserver function in mobx-react-lite

export default function ChampionSelect() {
    return useObserver(() => {
        if (!champSelect.state) return null;

        return (
            
                
                
                

                {/* Absolute Positioned Elements */}
                
                
                
                
            
        );
    });

function SelectedSectionName() {
    // This can't be a text directly since the bottom border doesn't render on iOS.
    return useObserver(() => (
        
            {getGamemodeName(store.selectedSection).toUpperCase()}
        
    ));
}

function Queues() {
    return useObserver(() => {
        const queues = store.availableQueues[store.selectedSection] || [];

        return (
            
                {queues.map(x => (
                    
                ))}
            
        );
    });
}

function Footer({ onSettings }: { onSettings: Function }) {
    return useObserver(() => (
        
            {socket.computerName}
             onSettings()}>
                
            
        
    ));
}

export function useMutation(component) {
  const store = useContext(StoreContext)
  const [queryMutation, startMutation] = useState(null)
  return useObserver(() =>
    component(store, startMutation, {
      loading: queryMutation ? queryMutation.loading : false,
      error: queryMutation ? queryMutation.error : undefined,
      data: queryMutation ? queryMutation.data : undefined
    })
  )
}

export function withStore(component) {
  const store = useContext(StoreContext)
  return useObserver(() => component(store))
}

function Sections() {
    return useObserver(() => (
        
            {store.sections.map(x => (
                <section selected="{store.selectedSection" id="{x}">
            ))}
        
    ));
}
</section>

function ChannelMessages ({ channel }) {
  const { sessionStore, uiStore } = useContext(RootContext)

  function onMessageUserClick (evt, profile, identity) {
    evt.persist()
    evt.stopPropagation()
    uiStore.openUserProfilePanel({ identity, profile }, getMousePosition(evt))
  }

  return useObserver(() => (
    <div>
      </div>

export function renderQuery(query, variables, handlers) {
  const store = useContext(StoreContext)
  const [queryResult] = useState(() => store.query(query, variables))
  return useObserver(() => queryResult.case(handlers))
}

function Page({ linkTo, title }) {
  const store = useContext(StoreContext)

  useEffect(() => {
    start()
    return stop
  }, [])

  return (
    <div>
      <h1>{title}</h1>
      {useObserver(() =&gt; (
        
      ))}
      <nav>
        
          <a>Navigate</a>
        
      </nav>
    </div>
  )
}