can't render react js component inside datatables column render function

I'm using datatables.net with React js. Im trying to render Awsome Font Component inside my datatables :

FontAwesomeComponent:

function FontAwesomeComponent({ icon, size, text }) {
  return (
    <FontAwesomeIcon icon={icon} size={size}>
      {text}
    </FontAwesomeIcon>
  );
}

datatables columns defs :

 columnDefs: [
 ...
 ....
 targets: 8,
          data: "reference",
          render: (data, type, row, meta) => {
            return (
              <FontAwesomeComponent
                icon={<FontAwesomeComponent icon={faUserCircle} size="2x" />}
                size="2x"
              />
            );
          },
        },
        ],

I'm getting [object Object] :

How can i fix that ? thank you

I replaced datatables net with react table

function Home() {
  const [loading, setLoading] = useState(true);
  const [projects, setProjects] = useState([]);
  const AUTH_TOKEN = getItemFromLocalStorage(
    "mafzqalywhltvtkkdfokkwngmzfgkgnx"
  );
  useEffect(() => {
    document.title = "IIG | Écran d'accueil";

    asyncSecureGetHelper(resource, AUTH_TOKEN)
      .then((response) => {
        setLoading(false);
        const data = response.data["hydra:member"];
        data.forEach((item) => {
          setProjects((prev) => [...prev, item]);
        });
      })
      .catch((error) => {
        setLoading(false);
      });
  }, []);

  return (
    <>
      <Header />
      <Container fluid>
        <Row>
          <SpinnerComponent isDisplayed={loading} />
        </Row>
        <Row>
          <Col
            xs={12}
            sm={12}
            md={{ span: 10, offset: 1 }}
            lg={{ span: 10, offset: 1 }}
          >
            <TableContainer component={Paper}>
              <Table sx={{ width: "100%" }} aria-label="">
                <TableHead>
                  <TableRow>
                    <TableCell align="left">Numéro de dossier</TableCell>
                    <TableCell align="left">Date de création</TableCell>
                    <TableCell align="left">Date de mise à jour</TableCell>
                    <TableCell align="left">Conseiller</TableCell>
                    <TableCell align="left">Type</TableCell>
                    <TableCell align="left">Catégorie</TableCell>
                    <TableCell align="left">Statut</TableCell>
                    <TableCell align="left">Afficher</TableCell>
                    <TableCell align="left">Modifier</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {projects.map((row) => (
                    <TableRow
                      key={row.id}
                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
                    >
                      <TableCell component="th" scope="row">
                        {row.reference}
                      </TableCell>
                      <TableCell align="left">{row.createdAt}</TableCell>
                      <TableCell align="left">{row.updatedAt}</TableCell>
                      <TableCell align="left">{row.user.email}</TableCell>
                      <TableCell align="left">{row.type.label}</TableCell>
                      <TableCell align="left">
                        {row.type.category.label}
                      </TableCell>
                      <TableCell align="left">{row.status.label}</TableCell>
                      <TableCell align="left">Afficher</TableCell>
                      <TableCell align="left">Modifier</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
            <SnackbarComponent
              open={true}
              message="Authentification réussie."
              autoHideDuration={300}
              handleClose={() => console.log("ok")}
            />
          </Col>
        </Row>
      </Container>
    </>
  );
}