Switch Between Next.js/React Components With An onClick Event

I'm having a hard time finding a simple example that shows how to click a button or link to switch between different React components (e.g. in Next.js projects). The code below is what I came up with. It works and is what's powering the example. I'm not sure if it's the recommended way or if there are issues with it. So, consider this page pending until I get some feedback on it.

(I had to add 'key' attributes to the components in the array which feels weird. That's part of what makes me think I'm not doing this in the generally recommended way)

Example

Here's a working example. Click the "Switch Componenets" button to change the component.

Code

This is the source code for the example above. Normally, I would split the components into seperate files. I'm combining them here to make the page easier to read.

import { useState } from 'react'
import style from './Styles.module.css'

function ComponentOne() {
  return <div>Component One is currently loaded</div>
}

function ComponentTwo() {
  return <div>Component Two is now loaded</div>
}

export default function SwitcherTest() {
  const theComponents = [<ComponentOne key="c1" />, <ComponentTwo key="c2" />]
  const [pointer, setPointer] = useState(0)

  const switchComponents = () => {
    if (pointer === 0) {
      setPointer(1)
    } else {
      setPointer(0)
    }
  }

  return (
    <div>
      {theComponents[pointer]}
      <button className={style.btn} onClick={() => switchComponents()}>
        Switch Components
      </button>
    </div>
  )
}

If you have feedback, please let me know