useEffect and state management library

Question

I have this problem that I am trying to understand and solve. I want to fetch data in the main component and allow editing of this data. The problem is that the first time the data is properly loaded into the state but if I go back to the previous page where the table is and enter to edit another record then until I re-render the page the data from the previous record are in the state. I use Zustand to pass data between components. Please help guys :(

const { id } = useParams<string>();
const setData1 = useStore((state) => state.setData1)
const setData2 = useStore((state) => state.setData2)

React.useEffect(() => {
    async function fetchData() {
      const response = await getExampleData(id);
      setData1(response.name);
      setData2(response.values);
    }
    fetchData();
  }, [id]);

return(
<ComponentData1/>
<ComponentData2/>)

And in i.e. ComponentData1 i'm using this below.

const data1 = useStore((state) => state.data1)