I am currently working on a project in Next.js where I have to make a form for uploading projects. The form consists of 4 different screens. It includes multiple input fields and files input. I am doing it on a single route with no parameters in the url where one of the four screens is displayed using ternary operator and the screen number is tracked by a useState variable. When the user moves to the next screen, the data of the previous screen is written to database i.e. Firebase.
The thing I want to ask is that what should I do if the user reloads the page on any screen, because it is hard to store this much amount of data in the localStorage.
Also, should I track the screen using the useState?
Please give suggestions.
The layout of the form is attached here.