search not working in react mdbdatatable for link

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const DatatablePage = () => {
  const data = {
    columns: [
      {
        label: 'Name',
        field: 'name',
        sort: 'asc',
        width: 150
      },
      {
        label: 'Position',
        field: 'position',
        sort: 'asc',
        width: 270
      },
      {
        label: 'Office',
        field: 'office',
        sort: 'asc',
        width: 200
      },
      {
        label: 'Random Word',
        field: 'random',
        sort: 'asc',
        width: 50
      }
    ],
    rows: [
      {
        name: 'Tiger Nixon',
        position: 'System Architect',
        office: 'Edinburgh',
        random: <h5 searchvalue={'tourist'} >tourist <span className="badge badge-danger">narrow</span></h5>
      },
      {
        name: 'Garrett Winters',
        position: 'Accountant',
        office: 'Tokyo',
        random: <h5 searchvalue={'expression'} >expression <span className="badge badge-danger">popular</span></h5>
      },
      {
        name: 'Ashton Cox',
        position: 'Junior Technical Author',
        office: 'San Francisco',
        random: <h5 searchvalue={'rule'} >rule <span className="badge badge-danger">estimate</span></h5>
      },
      {
        name: 'Cedric Kelly',
        position: 'Senior Javascript Developer',
        office: 'Edinburgh',
        random: <h5 searchvalue={'announcement'} >announcement <span className="badge badge-danger">preparation</span></h5>
      },
      {
        name: 'Airi Satou',
        position: 'Accountant',
        office: 'Tokyo',
        random: <h5 searchvalue={'preoccupation'} >preoccupation <span className="badge badge-danger">stock</span></h5>
      }
    ]
  };

  return (
    <MDBDataTable
      striped
      bordered
      hover
      data={data}
      sortRows={['random']}
    />
  );
}

export default DatatablePage;