React retain UI state of component instead of destroying and recreating every time

I have various components/sections on my page and at a time, only 1 section is supposed to be visible to the user. User clicks on different tabs to access the respective sections. As of now, my components are dynamically destroyed and shown based on the tab that is clicked.

{mySection1 && <div><MySection1 {...props} /></div>}
{mySection2 && <div><MySection2 {...props} /></div>}

Now the issue is within each section, there are different form fields and they even display inline error based on some validations (e.g. mandatory, regex, etc)

Now since I destroy and recreate the component on each tab click, I kind of loose the earlier component state and am finding it difficult to retain (e.g. retain the inline error on a field if user clears out a mandatory field)

I am trying to see if there can be another way to retain the UI state.

It would be great if someone could point out any reference example where I can try leveraging React.memo to somehow cache the UI state
Other is not sure if we can use visibility: hidden so that the component is not destroyed.