Estoy tratando de usar ganchos para controlar una pestaña react-bootstrap . Sin embargo, no estoy seguro de cómo duplicarlo con Nav y Tab.Content . La documentación oficial brinda instrucciones sobre cómo hacerlo para las Tabs normales, pero no para lo que estoy tratando de hacer.

Como ejemplo, cada vez que cargo mi SPA, las pestañas predeterminadas no muestran nada. Tengo que hacer clic en la Tab 1 o la Tab 2 antes de que se cargue algo.

Aquí está mi tarjeta:

 <Card style={{ borderRadius: "0px" }}> <TabContainer> <Card.Header> <Nav variant="pills"> <Nav.Item> <Nav.Link eventKey="first"> <div>Tab 1</div> </Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="second">Tab 2</Nav.Link> </Nav.Item> </Nav> </Card.Header> <Card.Body> <Tab.Content> <Tab.Pane eventKey="first">FIRST</Tab.Pane> <Tab.Pane eventKey="second">SECOND</Tab.Pane> </Tab.Content> </Card.Body> </TabContainer> </Card>

¿Cómo uso const [value,setValue] = useState('Tab 1') para trabajar con esto?