Why i always need to return some html with Zustand(React-Redux state management tool) Store?

Question

Why the "inc" button doesn't work, but the other ones are working? Am I missing something or is this the way that Zustand Store is supposed to work?

the page I'm trying to render

import React from "react";
// import store from "./store";
import { useStore } from "./zustandStore/store";

export default function App() {
  const AddAModel = () => {
    const inc = useStore((state) => state.bears);
    console.log(inc);
  };

  function BearCounter() {
    const bears = useStore((state) => state.bears);
    return <h1>{bears} around here ...</h1>;
  }

  function Controls() {
    const increasePopulation = useStore((state) => state.increasePopulation);
    return <button onClick={increasePopulation}>one up</button>;
  }

  return (
    <div>
      APP
      <div>
        <button onCLick={AddAModel}>inc</button>
        {Controls()}
        {BearCounter()}
      </div>
    </div>
  );
}

the store

import create from "zustand";
import { devtools } from "zustand/middleware";

let store = (set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
});

store = devtools(store);

export const useStore = create(store);

here is a link to the Zustand state management tool: https://github.com/pmndrs/zustand