How do I make this React Core UI Tab Pane component work?

I am trying to use the core ui react tab pane component. The tab pane is supposed to show according to the tab header clicked and the first tab pane should show by default. The problem is that it isn't working and showing any tab pane at all. The component goes like this:

import React, { useState } from 'react

const Tab = () => {
  const [activeKey, setActiveKey] = useState(1)
  return (
    <>
      <CNav variant="pills">
        <CNavItem>
          <CNavLink
            href="#"
            active={activeKey === 1}
            onClick={() => setActiveKey(1)}
          >
            Active
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink
            href="#"
            active={activeKey === 2}
            onClick={() => setActiveKey(2)}
          >
            Link
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink
            href="#"
            active={activeKey === 3}
            onClick={() => setActiveKey(3)}
          >
            Link
          </CNavLink>
        </CNavItem>
      </CNav>
      <CTabContent>
        <CTabPane visible={activeKey === 1}>
          Raw denim you probably haven't heard of them jean shorts Austin.
          Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache
          cliche tempor, williamsburg carles vegan helvetica. Reprehenderit
          butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi,
          qui irure terry richardson ex squid. Aliquip placeat salvia cillum
          iphone. Seitan aliquip quis cardigan american apparel, butcher
          voluptate nisi qui.
        </CTabPane>
        <CTabPane visible={activeKey === 2}>
          Food truck fixie locavore, accusamus mcsweeney's marfa nulla
          single-origin coffee squid. Exercitation +1 labore velit, blog
          sartorial PBR leggings next level wes anderson artisan four loko
          farm-to-table craft beer twee. Qui photo booth letterpress, commodo
          enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum
          PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus
          mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente
          labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
          sustainable jean shorts beard ut DIY ethical culpa terry richardson
          biodiesel. Art party scenester stumptown, tumblr butcher vero sint
          qui sapiente accusamus tattooed echo park.
        </CTabPane>
        <CTabPane visible={activeKey === 3}>
          Etsy mixtape wayfarers, ethical wes anderson tofu before they sold
          out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table
          readymade. Messenger bag gentrify pitchfork tattooed craft beer,
          iphone skateboard locavore carles etsy salvia banksy hoodie
          helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit
          cred pitchfork. Williamsburg banh mi whatever gluten-free, carles
          pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester
          cred you probably haven't heard of them, vinyl craft beer blog
          stumptown. Pitchfork sustainable tofu synth chambray yr.
        </CTabPane>
      </CTabContent>
    </>
  )
}

export default Tab

On inspection of the console, I saw the error: Warning: Received "true" for a non-boolean attribute 'visible' . I proceeded to fix that by wrapping the boolean evaluation variable into template literals which eliminated the error in console but the code isn't still working as it's supposed to. Below is my fix to eliminate the console error:

...

<CTabContent>
        <CTabPane visible={`${activeKey === 1}`}>
          ...
        </CTabPane>
        <CTabPane visible={`${activeKey === 2}`}>
          ...
        </CTabPane>
        <CTabPane visible={`${activeKey === 3}`}>
          ...
        </CTabPane>
      </CTabContent>
...

Here is the link to the documentation page on core ui: https://coreui.io/react/docs/4.0/components/tabs/#example

Thank you