ReactJS Decide Between Using Stateless or Statefull Component

Since few days I've been stuck at a particular dilemma where the scenario is like.

Scenario:

I have a page where you select some options from a select-option dropdown (Let's assume we select 2 options from dropdown) and on click of "Next" button would hide previous UI components (Multi select-option dropdown) and renders next UI component which is basically set of Checkboxes like "Sunday, Monday, Tuesyay, Wednesday, Thursday, Friday, Saturday" along with "Previous" and "Next" buttons appearing at center of Left and Right sides (Imagine image carousel with prev and next button at both left and right sides).

Problem:

As per assumption we select 2 options from select-option dropdown and on click of "Next", set of Checkboxes would get rendered twice with the help of .Map() along with "Previous" and "Next" buttons appearing at center of Left and Right sides. First set of checkboxes appears initially and on click of "Next", 2nd set of Checkboxes appears and previous set of Checkboxes hides/slides away/back. Problem is how am I supposed to maintain separate states for each set of Checkboxes rendered twice and maintain their checked/unchecked state for each slide of Checkboxes set.

Stateless Component Solution

I tried with Stateless component but creating dynamic states and keeping track of selected Checkboxes of every set of Checkboxes (Sun - Sat Checkboxes) which is rendered twice leads to Spaghetti Code and very buggy code.

I am thinking of going with Stateful Component Solution, will that pose any inefficient choice or leads to performance issues as bad coding practices choice?

Can you tell me how to solve this issue without creating unmaintainable complicated spaghetti code?

Looking forward to hear from you guys,

Thanks and warm regards,

Rohit Paniker