How to use the use-immer.useImmer function in use-immer

export function useEntityComponentSystem(
  initialEntities = [],
  systems = [],
  {
    initializeEntities = defaultInitializeEntities,
    getUniqueId = defaultUniqueId,
    renderEntities = defaultRenderEntities,
    debug = false,
  } = {},
) {
  const [entities, updateEntities] = useImmer({})

  const warnIfEntitiesUpdatedMoreThanTwoRendersInARow = useConsoleWarnIfInvokedTooManyRendersInARow(
    2,
    `Entities initialized more than 2 renders in a row.
    You may want to wrap them in React.useState or move the array outside of the component using useEntityComponentSystem.`,
  )
  React.useEffect(() => {
    debug && console.debug('Initialilizing entities')
    warnIfEntitiesUpdatedMoreThanTwoRendersInARow()
    updateEntities(() => initializeEntities(initialEntities, getUniqueId))
  }, [
    initialEntities,
    initializeEntities,
    updateEntities,
    getUniqueId,
    warnIfEntitiesUpdatedMoreThanTwoRendersInARow,

export const useObjectState = (initialState: T) => {
  const [state, update] = useImmer(initialState)

  const updater = useCallback((part: Partial | ((draft: Draft) => Partial)) => {
    update(draft => {
      if (typeof part === 'function') {
        Object.assign(draft, part(draft))
      } else {
        Object.assign(draft, part)
      }
    })
  }, [])

  return [state, updater] as const
}

export function useObject (initialValue: T) {
    const [copy, rawSet] = useImmer(initialValue)

    function set> (key: K, value: Draft[K]): void
    function set> (data: Partial): void
    function set> (f: (draft: Draft) => void | T): void
    function set> (data: any, value?: Draft[K]): void {
        if (typeof data === 'string') {
            rawSet(draft => {
                const key = data as K
                const v = value
                draft[key] = v
            })
        } else if (typeof data === 'function') {
            rawSet(data)
        } else if (typeof data === 'object') {
            rawSet((draft: Draft) => {
                const obj = data as Draft

const Sidebar = ({
  isSidebarOpened,
  activeSubreddit,
  isRedditBlocked,
  savedSubreddits
}: SidebarProps) => {
  const [subreddits, updateSubreddits] = useImmer(savedSubreddits);
  const [subredditInput, setSubredditInput] = useState("");
  const [subredditInputHasFocus, setSubredditInputHasFocus] = useState(
    false
  );

  const subredditInputRef = useRef();

  const focusSubredditInput = () => {
    if (subredditInputRef.current) {
      subredditInputRef.current.focus();
    }
  };

  const handleChange = (e: ChangeEvent) => {
    setSubredditInput((e.target.value || "").toLowerCase());
  };

function useFeedInfo(feedId: string): FeedInfo {
  const feed = useFeed(feedId)
  const [info, update] = useImmer({
    writable: false,
    downloaded: 0,
    total: 0,
    blocks: [],
  })

  useEffect(() => {
    if (!feed) return () => {}

    function setTotals(info: FeedInfo) {
      if (!feed) return
      info.total = feed.length
      info.downloaded = feed.downloaded()
    }

    function onReady() {