I have two tabs, each containing multiple components. When switching between tabs, all components reload every time. I need to retain the previously focused input (Control) when switching tabs. How can I achieve this in ReactJS?

Tried below code. Not working

const [activeTab, setActiveTab] = useState(0);
const tab1ContentRef = useRef(null);
const tab2ContentRef = useRef(null);

const handleTabClick = (tabIndex) => {
 setActiveTab(tabIndex);
};

useEffect(() => {
if (activeTab === 0 && tab1ContentRef.current) {
  tab1ContentRef.current.focus();
} else if (activeTab === 1 && tab2ContentRef.current) {
  tab2ContentRef.current.focus();
}
}, [activeTab]);