I'm trying to use hooks to control a react-bootstrap tab. However I'm not sure how to double it up with Nav and Tab.Content. The official documentation provides instructions on how to do it for normal Tabs but not for what I am trying to do.

As an example, whenever I load up my SPA, the default tabs show nothing. I have to click on Tab 1 or Tab 2 before anything loads.

Here is my card:

              <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>

How do I use const [value,setValue] = useState('Tab 1') to work with this?