AppQueryString.jsx

import React from "react";
import ReactDOM from "react-dom";
import { Tabs, Tab } from "react-bootstrap";
import useQueryString from "./useQueryString";

import "./styles.css";

function App() {
  const [value, onSetValue] = useQueryString("water");
  return (
    <div className="App">
      <h1>Tabs and query string example</h1>
      <Tabs activeKey={value} onSelect={onSetValue}>
        <Tab eventKey="water" title="Water" />
        <Tab eventKey="coffe" title="Coffe" />
        <Tab eventKey="tea" title="Tea" />
      </Tabs>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);