CButton in scopedSlots of CDatatable Rendering Twice

Question

I'm trying to display some data using the CoreUI library. The issue I'm having is that the button I'm making as a scopedSlot is being created twice - once in the correct place and again on the next row.

Here is the code:

import { CButton, CCard, CCardBody, CCol, CDataTable, CNav, CNavItem, CNavLink, CRow } from '@coreui/react'
import PageContent from 'components/templates/PageContent'
import Layout from 'containers/Layout'
import { useEffect, useState } from 'react'
import { useAdminTools } from 'hooks/useAdminTools'

const fields = [
  { key: 'id', label: 'User ID'},
  { key: 'fullName', label: 'Name' },
  { key: 'primaryEmail', label: 'Primary Email' },
  {
    key: 'details',
    label: '',
    sorter: false,
    filter: false
  }
]

// ... type definitions ...

const EmployeeList = () => {
  const {
    fetchEmployeeList,
  } = useAdminTools()

  const [employeeList, setEmployeeList] = useState<Employee[]>([])
  const [loading, setLoading] = useState(true)

  const [size, setSize] = useState(40) // batch size for fetch
  const [initialized, setInitialized] = useState(false)

  // on page start - get all employees from db
  useEffect(() => {
    if (!initialized) {
      fetchAll()
    }
  }, [])

  const fetchAll = async () => {
    // ... get all the data from the  database ...
    setInitialized(true)
    setLoading(false)
  }

  return (
    <Layout>
      <PageContent
        title="Employees"
      >
        <CCard>
          <CCardBody>
            <CDataTable
              loading={loading}
              items={employeeList}
              fields={fields}
              tableFilter
              itemsPerPageSelect
              itemsPerPage={10}
              sorter
              pagination
              scopedSlots={{
                'details': (item : any, index : number) => {
                  console.log(index)
                  return (
                    <td > 
                      <CButton
                        color ='primary'
                        onClick={() => { console.log(index) }}
                      >
                        test
                      </CButton>
                    </td>
                  )
                }
              }}
            />
          </CCardBody>
        </CCard>
      </PageContent>
    </Layout>
  )
}

export default EmployeeList

Here is an example of what it comes out looking like:

The console.log within the details slot confirms that it's being created twice for each item

I'm also getting a warning which I believe is related

Inspecting the element shows it's making a whole new row with a nested element

I have followed the docs pretty closely so I'm not sure exactly is happening. I'm assuming it's tied to something with the react component lifecycle that I don't understand (I'm pretty new to front end dev).

I'm pretty sure I could keep track of which indices have already had a button added, but that seems hacky and I'd like to know what's going on here.