I have using react-data-table-component in my Reactjs application. In my custom column I am using anchor tags as buttons and is using feather-icons for that. The problem is that the icons are not showing. Sometimes it shows when I click any other link on the page. I am initiating the feather icon inside useEffect hook. How can I fix this?

const columns = [
    {
      name: 'S/N',
      selector: row => row.u_id,
    },
    {
      name: 'Username',
      selector: row => row.username,
    },
    {
      name: 'Action',
      cell: row => <><a href="javascript:void(0)" onClick={(e) => getUser(e, row.u_id)}><span data-feather="edit"></span></a><a href="javascript:void(0)" onClick={(e) => deleteUser(e, row.u_id)}><span data-feather="trash"></span></a></>
    },
  ];

useEffect(() => {
    feather.replace()
  }, []);


<DataTable
              columns={columns}
              data={users}
              pagination
            />