Entire NextPage from NextJs is executed after Button Change. It should only executed the change. What am I doing wrong?

Question

I don't understand the behaviour of my Home Page. When pressing the Button, I would expect that it only logs the new button value in my Console. But it also logs "This is my Test". It appears to me that it execute the entire page again. How can I avoid this behaviour?

import { Button } from "@mui/material";
import type { NextPage } from "next";
import { useValue } from "./visualization/services/customZustand";

const Home: NextPage = () => {
  const value = useValue((state) => state.value);
  const increase = useValue((state) => state.increase);
  console.log("This is my value", value); 
  console.log("This is my Test");  ❓ why is this always executed when pressing the button?

  return (
    <div>
      Hello World, increase value by {value}
      <Button variant="contained" onClick={() => increase(1)}>
        Button
      </Button>
    </div>
  );
};

export default Home;

import { Vector3 } from "@react-three/fiber";
import create from "zustand";

interface ValueState {
  value: number;
  increase: (something: number) => void;
  reset: () => void;
}

export const useValue = create<ValueState>()((set) => ({
  // initial state
  value: 0,

  // method to modify state
  increase: (by: number) => set((state) => ({ value: state.value + by })),
  reset: () => set(() => ({ value: 0 })),
}));