I made a Cat component using a minimal zustand store:

import { shallow } from "zustand/shallow";
import { CatStoreSchema, useCatStore } from "./CatStore";

export const Cat = () => {
  const selector = (state: CatStoreSchema) => ({
    meows: state.meows,
    incrementMeows: state.incrementMeows,
  });

  const { meows, incrementMeows } = useCatStore(selector, shallow);
  
  return (
    <div>
      <span>Cat meowed {meows} times</span>
      <button onClick={incrementMeows}>Meow!</button> 
    </div>
  );
}

The Store:

import { create } from 'zustand';

export type CatStoreSchema = {
  meows: number;
  incrementMeows: () => void;
};

export const useCatStore = create<CatStoreSchema>((set, get) => ({
  meows: 0,
  incrementMeows: () => set(state => ({ meows: state.meows + 1 })),
}));  

Now, this works great. But what if I want each component to get their own store? Because this is what happens when rendering multiple cat components in a list:

Cat meowed 15 times [Meow!]
Cat meowed 15 times [Meow!]

They share the store. I tried reading about providers but could not get my head around it. How can I ensure unique/separate stores per component here?

UPDATE
I did not mention, in my app <Cat /> will have sub components also needing store data. As it is now, they will select that directly from the store, they are not passed anything. I hope to find a solution where that will continue to work