Tengo un div en el que tengo 3 pestañas y 2 botones "Atrás" y "Siguiente".

Lo que quiero lograr es que al hacer clic en el botón "Siguiente" debería pasar a la siguiente pestaña y al hacer clic en el botón "Atrás" debería pasar a la pestaña anterior.

He usado el siguiente código pero no funciona

 const [ins, setIns] = useState(false) const [pre, setPre] = useState(true); const [ques, setQues] = useState(false); const [selectedTab, setSelectedTab] = useState(0); const tabCount = 3 const onTabClick = (category, val) => { updateTab([category], val); } const updateTab = (category, type) => { if (type === 'ins') { setSelectedTab(0) setIns(true) setPre(false setQues(false) } if (type === 'pre') { setSelectedTab(1) setIns(false) setPre(true) setQues(false) } if (type === 'ques') { setSelectedTab(2) setQues(true) setIns(false) setPre(false) } <div> <ul> <li className="nav-item"> <button type="button" className={ins ? 'nav-link pb-3 active' : 'nav-link pb-3'} onClick={() => { onTabClick('infoTabs', 'ins') }}> Ins </button> </li> <li className="nav-item"> <button type="button" className={pre ? 'nav-link pb-3 active' : 'nav-link pb-3'} onClick={() => { onTabClick('infoTabs', 'pre') }}> Pre </button> </li> <li className="nav-item"> <button type="button" className={ques ? 'nav-link pb-3 active' : 'nav-link pb-3'} onClick={() => { onTabClick('infoTabs', 'ques') }} > Ques </button> </li> </div> <div> <button type="button" onClick={() => setSelectedTab((selectedTab + tabCount - 1) % tabCount )} > Back </button> </div> <div > <button type="button" onClick={() => setSelectedTab((selectedTab + 1) % tabCount )} > Next </button> </div> }