svelte table does not seem to be reactive when pulling data from query

    import { getCoreRowModel, createSvelteTable, getSortedRowModel, type TableOptions, flexRender, type ColumnDef, type Table } from '@tanstack/svelte-table';
    import { createQuery } from '@tanstack/svelte-query';
    import { awaitTimeOut } from '$utils/awaitSleep';
    import { usersList } from './data';
    import { Chips, DateCell, Id } from '$components/tables/cells';
    import { dateFormatter } from '$lib/formatters';
    import type { Readable } from 'svelte/store';

    interface User {
        id: string;
        firstName: string;
        lastName: string;
        email: string;
        isOnline: boolean;
        createdAt: string;
        roles: string[];
    }

    async function getUsers() {
        await awaitTimeOut(1000);

        return usersList;
    }
    let users = createQuery({
        queryKey: ['users'],
        queryFn: getUsers,
        initialData: [
            {id: '031a9ead-acb1-446b-b4e7-b9b1cac125f4', firstName: 'Joellyn', lastName: 'Filipponi', email: 'jfilipponi0@soup.io', isOnline::false, roles: ['admin'], createdAt: '2022-01-12 10:07:07'},
        ],
        onSuccess: (data) => {}
    });

    const columns: ColumnDef<User>[] = [
        {
            id: 'name',
            accessorFn: (row) => `${row.firstName} ${row.lastName}`,
            header: 'Name'
        },
        {
            id: 'createdAt',
            accessorFn: (row) => dateFormatter.format(new Date(row.createdAt)),
            header: 'Created At',
            cell: (cell) => flexRender(DateCell, { value: cell.getValue() })
        },
        {
            id: 'roles',
            accessorKey: 'roles',
            header: 'Roles',
            cell: (cell) => flexRender(Chips, { value: cell.getValue() })
        }
    ];

    const options: TableOptions<User> = {
        data: $users.data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        enableRowSelection: true
    };

    let table: Readable<Table<User>> = createSvelteTable(options);

    import { getCoreRowModel, createSvelteTable, getSortedRowModel, type TableOptions, flexRender, type ColumnDef, type Table } from '@tanstack/svelte-table';
    import { createQuery } from '@tanstack/svelte-query';
    import { awaitTimeOut } from '$utils/awaitSleep';
    import { usersList } from './data';
    import { Chips, DateCell, Id } from '$components/tables/cells';
    import { dateFormatter } from '$lib/formatters';
    import type { Readable } from 'svelte/store';

    interface User {
        id: string;
        firstName: string;
        lastName: string;
        email: string;
        isOnline: boolean;
        createdAt: string;
        roles: string[];
    }

    async function getUsers() {
        await awaitTimeOut(1000);

        return usersList;
    }
    let users = createQuery({
        queryKey: ['users'],
        queryFn: getUsers,
        initialData: [
            {id: '031a9ead-acb1-446b-b4e7-b9b1cac125f4', firstName: 'Joellyn', lastName: 'Filipponi', email: 'jfilipponi0@soup.io', isOnline::false, roles: ['admin'], createdAt: '2022-01-12 10:07:07'},
        ],
        onSuccess: (data) => {}
    });

    const columns: ColumnDef<User>[] = [
        {
            id: 'name',
            accessorFn: (row) => `${row.firstName} ${row.lastName}`,
            header: 'Name'
        },
        {
            id: 'createdAt',
            accessorFn: (row) => dateFormatter.format(new Date(row.createdAt)),
            header: 'Created At',
            cell: (cell) => flexRender(DateCell, { value: cell.getValue() })
        },
        {
            id: 'roles',
            accessorKey: 'roles',
            header: 'Roles',
            cell: (cell) => flexRender(Chips, { value: cell.getValue() })
        }
    ];

    const options: TableOptions<User> = {
        data: $users.data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        enableRowSelection: true
    };

    let table: Readable<Table<User>> = createSvelteTable(options);