I have a requirement where i need to create a web app in nextjs that has tabs components in it.

The idea is that this will handle multiple entities in each tab, for example i have a search bar to select diferent products, when i select one, a new tab is created with that product info as well as forms which the user will manually fill.

Each time i select a new product a new tab is opened but i should not loose what i entered in the first tab.

I need to be able to switch between tabs without loosing state.

I want to know is there any simple straight forward way? a simple example will be great.

I have achieved this using zustand and store each tab content changes in a variable then fetch it when ever a tab is opened, but it looks dirty and not maintainable.