Zustand causing rerenders every time a state change in the store

Question

i have been using zustand to avoid component re renders, so i just figured out that when i create the component in the same file, everything is fine , but when you just create a component in a seperate file and import it, it re renders every time a state change in the useStore

import useStore from '../components/store'
import AddToCartSection from '../components/addToCart'

function test() {

  const tagId = useStore((state) => state.tagId)
  const setTagId = useStore((state) => state.setTagId)
  const cartCount = useStore((state) => state.cartCount)

  const Test = () => {
    return <div className="h-20 w-20 ">Test</div>
  }

  return (
    <div className=" flex flex-col w-full h-full justify-around">
      <Test />
      <button onClick={() => setTagId('23456')}> setTagId </button>
      <button onClick={() => setTagId('')}> Reset </button>
      <h1> tagId: {tagId} </h1>
      <AddToCartSection />
      <p> {cartCount} </p>
    </div>
  )
}

export default test

for example in this code, the test component doesnt re render, but the addToCartSection is rerendering every time a state change in the store