I should be able to search and order on a column where the content is generated by a react component (the Name column in this example)

The table doesn't order on the column and the search results don't include items in the Name column

ResourcesTable.jsx file

import '@fortawesome/fontawesome-free/css/all.min.css'; 
import 'bootstrap';
import '../vendors/mdb/package/dist/css/mdb.min.css';
import React, { useState} from 'react';
import { MDBDatatable } from '../vendors/mdb/package/dist/mdb-react-ui-kit.esm.js';
import MoreInfoCell from './MoreInfoCell.jsx';

const ResourcesTable = () => {
const [advancedData, setAdvancedData] = useState({
columns: [
      { label: 'Name', field: 'name', sort: true },
      { label: 'Position', field: 'position', sort: true },
      { label: 'Office', field: 'office', sort: true },
      { label: 'Age', field: 'age', sort: true },
      { label: 'Start date', field: 'date', sort: true },
      { label: 'Salary', field: 'salary', sort: true },
    ],
rows: [
  {
    name: <MoreInfoCell text='Person 1' />,
    position: 'System Architect',
    office: 'Edinburgh',
    age: 61,
    date: '2011/04/25',
    salary: '$320,800'
  },
  {
    name: <MoreInfoCell text='Person 2' />,
    position: 'Accountant',
    office: 'Tokyo',
    age: 63,
    date: '2011/07/25',
    salary: '$170,750',
  },
  {
    name: <MoreInfoCell text='Person 3' />,
    position: 'Junior Technical Author',
    office: 'San Francisco',
    age: 66,
    date: '2009/01/12',
    salary: '$86,000'
  }
]
  });
return (
    <MDBDatatable search advancedData data={advancedData} searchRows={['Name']} />
  );
}
export default ResourcesTable;

MoreInfoCell.jsx file import React from 'react';

const MoreInfoCell = ({text}) => {
    return <span className='moreInfo' searchValue={text}>{text}</span>;
};

export default MoreInfoCell;

Thanks