How can Core UI React Smart Table render the correct button and modal after pagination or filtering?

Question

Illustrated below is the Core UI Pro Smart Table at render all buttons function as expected. Now if anything at all changes i.e. you filter the table searching for a specific product or you click to the next page. The data in the columns will all be correct but the Edit button will only open the original modal from the first page. I either need a way to tell those buttons to specifically open a modal by ID or something.. or I need a way where the modals with those buttons are reloaded when the table is filtered or something changes.

The table itself is setup in the following way:

const columns = [
  {
    key: 'name',
    label: 'Location'
  },
  {
    key: 'product_number',
    label: 'Product Number'
  },
  { 
    key: 'product_name',
    label: 'Name'
  },
  {
    key: 'quantity',
    label: 'Quantity'
  },
  { 
      key: 'unit_measure',
      label: 'U/M'
  },
  { 
    key: 'comment',
    label: 'Comment'
  },
  {
    key: 'edit',
    label: '',
    _style: { width: '1%' },
    filter: false,
    sorter: false,
  },
  {
    key: 'print',
    label: '',
    _style: { width: '1%' },
    filter: false,
    sorter: false,
  }
]

<CSmartTable 
          items={locations}
          columns={columns}
          pagination
          columnSorter
          itemsPerPage={10}
          itemsPerPageSelect
          columnFilter
          scopedColumns={{
              edit: (item) => { 
                  return(
                      <td className="py-2" id={item.id}>
                          <WarehouseLocation location={item} action="Edit" />
                      </td>
                  ) 
              },
              print: (item) => {
                return( 
                    <td className="py-2">
                        <LocationPrint location={item} />
                    </td>
                )
              }
          }}
          tableProps={{
              responsive: true,
              striped: true,
              }}
           />

Here is how the button and modal are loaded:

return (
    <>
    <CButton color={color} size={size} variant={variant} shape="square" onClick={() => setVisible(!visible)}>{ (action === "Edit") ? action : action + " Location" }</CButton>
    <CModal
        visible={visible}
        backdrop="static"
        onClose={() => setVisible(false)}>
    <CModalHeader onClose={() => setVisible(false)}>
        <CModalTitle>{action} Location</CModalTitle>
    </CModalHeader>
    <CModalBody>
        <CAlert visible={alertVisible} color={alertColor}>
            {alertMessage}
        </CAlert>
        <CForm
            className="row g-3 needs-validation"
            id="location"
            noValidate
            validated={validated}
            onSubmit={handleSubmit}>
            <CCol md={12} style={(action === "Edit") ? {display: "none"} : {}}>
                <FuzzySearch 
                    list={props.products} 
                    keys={["name", "product_number"]} 
                    keyForDisplayName={"name"}
                    placeholder="Search for Product"
                    onSelect={
                        (product) => {
                            setProductId(product.id);
                            setProductName(product.name);
                            setProductNumber(product.product_number);
                            setUnitMeasure(product.unit_measure);
                        }
                    }
                    maxResults={5} />
            </CCol>
            <CCol md={6}>
                <CFormInput
                    type="text"
                    defaultValue={productNumber}
                    label="Product Number"
                    disabled
                />
            </CCol>
            <CCol md={6}>
                <CFormInput
                    type="text"
                    defaultValue={productName}
                    label="Product Name"
                    disabled
                />
            </CCol>
            <CCol md={6}>
                <CFormInput
                    type="text"
                    onChange={e => setName(e.target.value)}
                    defaultValue={name}
                    feedbackInvalid="Please provide a warehouse location."
                    label="Location"
                    required
                />
            </CCol>
            <CCol md={4}>
                <CFormInput
                    type="text"
                    onChange={e => setQuantity(e.target.value)}
                    defaultValue={quantity}
                    label="Quantity"
                />
            </CCol>
            <CCol md={2}>
            <CFormInput
                    type="text"
                    defaultValue={unitMeasure}
                    label="U/M"
                    disabled
                />
            </CCol>
            <CCol md={12}>
                <CFormTextarea
                    label="Comment"
                    onChange={e => setComment(e.target.value)}
                    rows={3}
                    defaultValue={comment}
                />
            </CCol>
        </CForm>
    </CModalBody>
    <CModalFooter>
        <CButton color="secondary" onClick={() => close()}>
        Close
        </CButton>
        <CButton color="primary" form="location" type="submit">Save changes</CButton>
    </CModalFooter>
    </CModal>
</>
)