I am working on a React project where I use the DataTables library to create data tables. In these tables, I want to make fields like "Slug" and "Actions" clickable using the React Link component. However, the links created with the Link component are not rendering and are displayed as [object Object] in the table. I have tried many solutions but haven't been able to make it work.

My goal is to make sure that only the React components change without reloading the page. If I use the tag to create the links, the page reloads. But when I use the React Link component, I either get the "[object Object]" error. Despite using React Router correctly, I can't solve this issue.

In some comments I have seen that DataTable's React rendering doesn't work well, and it has been suggested that switching from DataTable to react-table would be a better solution. If that's the only solution, I will consider doing that.

Here is how I am trying to use the Link component within the render function in DataTable:

const tableOptions = {
    paging: true,
    searching: true,
    ordering: true,
    columnDefs: [
        {
            target: 0,
            visible: false,
        }
    ],
    language: {
        search: "Ara:",
        paginate: {
            previous: "Önceki",
            next: "Sonraki"
        },
        lengthMenu: "_MENU_ kayıt gösteriliyor",
        info: "_START_ ile _END_ arası, toplam _TOTAL_ kayıt",
        emptyTable: "Eşleşen kayıt bulunamadı",
        zeroRecords: "Eşleşen kayıt bulunamadı",
        infoEmpty: "Gösterilecek kayıt yok",
        infoFiltered: "(_MAX_ toplam kayıttan filtrelendi)"
    }
};

const { data: blogListData, loading: blogListLoading, error: blogListError } = useFetch("https://localhost:44352/api/Blog/List");

useEffect(() => {
    if (blogListData?.Data) {
        const formattedData = blogListData.Data.map(item => ({
            id: item.Id,
            title: item.Title,
            content: item.Content,
            slug: item.Slug,
            createDate: item.CreateDate,
            createUser: item.CreateUser
        }));
        setTableData(formattedData);
    }
}, [blogListData]);

useEffect(() => {
    if (blogListData?.Data) {
        const formattedData = blogListData.Data.map(item => ({
            id: item.Id,
            title: item.Title,
            content: item.Content,
            slug: item.Slug,
            createDate: item.CreateDate,
            createUser: item.CreateUser
        }));
        setTableData(formattedData);
    }
}, [blogListData]);

<DataTable
    data={tableData}
    className="table table-bordered dt-responsive nowrap"
    style={{borderCollapse: "collapse", borderSpacing: "0", width:"100%"}}
    options={tableOptions}
    columns={[
        { title: "ID", data: "id" },
        { title: "Title", data: "title" },
        { title: "Content", data: "content" },
        {
            title: "Slug",
            data: "slug",
            render: (data) => `<a href="/blogdetail/${data}" target="_blank">${data}</a>`
        },
        { title: "Create Date", data: "createDate" },
        { title: "Create User", data: "createUser" },
        {
            title: "Edit",
            data: "id",
            render: (data) => {
                return (
                    <Link to={`/blog/edit/${data}`}>Edit</Link>
                );

            }
        }
    ]}
/>