Using store as Datasource causes error

[TBenTiCon]

When parsing a writable into createTable, im getting an error:

TypeError: store.subscribe is not a function
    at subscribe (chunk-524A2PSM.js?v=e9c8cee3:87:23)
    at $$subscribe_data (data-table.svelte:102:44)
    at $$self.$$set (data-table.svelte:98:63)
    at proxy.<anonymous> (proxy.js?v=e9c8cee3:83:28)
    at proxy.$set (chunk-524A2PSM.js?v=e9c8cee3:2509:12)
    at dest.<computed> [as $set] (proxy.js?v=e9c8cee3:46:41)
    at Object.update [as p] (+page.svelte:168:25)
    at update (chunk-524A2PSM.js?v=e9c8cee3:1351:32)
    at flush (chunk-524A2PSM.js?v=e9c8cee3:1317:9)

This is the entire component:

<script lang="ts">
	import { get, readable, writable } from 'svelte/store';
	import { Render, Subscribe, createRender, createTable } from 'svelte-headless-table';
	import {
		addColumnFilters,
		addHiddenColumns,
		addPagination,
		addSelectedRows,
		addSortBy,
		addTableFilter
	} from 'svelte-headless-table/plugins';
	import {
		DataTableCheckbox,
		DataTableColumnHeader,
		DataTablePagination,
		DataTableToolbar
	} from './components/index';

	import * as Table from '$lib/components/ui/table/index.js';
	import { generateColumn } from '$lib/components/ui/data-table/utils';
	import { ScrollArea } from '$lib/components/ui/scroll-area';
	import type { Issue } from '$lib/types';

	//types
	interface ColumnPlugin {
		sort?: {
			disable: boolean;
		};
		colFilter?: {
			fn: (args: { filterValue: any; value: any }) => boolean;
			initialFilterValue: any[];
			render: (args: { filterValue: any }) => any;
		};
	}

	interface ColumnOption {
		accessor?: string;
		header: string | (() => string);
		id: string;
		cell?: (args: { value: any; row: any }) => any;
		sortable?: boolean;
		filterable?: boolean;
		display?: boolean;
		plugins?: ColumnPlugin;
	}

	interface Options {
		columns: ColumnOption[];
	}

	//external data
	export let data: Issue[];
	export let options: Options;

	const table = createTable(data, {
		select: addSelectedRows(),
		sort: addSortBy({
			toggleOrder: ['asc', 'desc']
		}),
		page: addPagination({ initialPageSize: 20 }),
		filter: addTableFilter({
			fn: ({ filterValue, value }) => {
				return value.toLowerCase().includes(filterValue.toLowerCase());
			}
		}),
		colFilter: addColumnFilters(),
		hide: addHiddenColumns()
	});

	const columns = [
		table.display({
			id: 'select',
			header: (_, { pluginStates }) => {
				const { allPageRowsSelected } = pluginStates.select;
				return createRender(DataTableCheckbox, {
					checked: allPageRowsSelected,
					'aria-label': 'Select all'
				});
			},
			cell: ({ row }, { pluginStates }) => {
				const { getRowState } = pluginStates.select;
				const { isSelected } = getRowState(row);
				return createRender(DataTableCheckbox, {
					checked: isSelected,
					'aria-label': 'Select row',
					class: 'translate-y-[2px]'
				});
			},
			plugins: {
				sort: { disable: true }
			}
		}),
		...options.columns.map((option) => generateColumn(table, option))
	];

	const tableModel = table.createViewModel(columns);

	const { headerRows, pageRows, tableAttrs, tableBodyAttrs } = tableModel;
</script>

<div class="flex w-full grow flex-col !space-y-4">
	<DataTableToolbar {tableModel} data={$data} {options} />
	<ScrollArea orientation="vertical" class="grow">
		<div class="rounded-md border">
			<Table.Root {...$tableAttrs}>
				<Table.Header>
					{#each $headerRows as headerRow}
						<Subscribe rowAttrs={headerRow.attrs()}>
							<Table.Row>
								{#each headerRow.cells as cell (cell.id)}
									<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
										<Table.Head {...attrs}>
											{#if cell.id !== 'select' && cell.id !== 'actions'}
												<DataTableColumnHeader {props} {tableModel} cellId={cell.id}>
													<Render of={cell.render()} /></DataTableColumnHeader
												>
											{:else}
												<Render of={cell.render()} />
											{/if}
										</Table.Head>
									</Subscribe>
								{/each}
							</Table.Row>
						</Subscribe>
					{/each}
				</Table.Header>
				<Table.Body {...$tableBodyAttrs}>
					{#if $pageRows.length}
						{#each $pageRows as row (row.id)}
							<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
								<Table.Row {...rowAttrs}>
									{#each row.cells as cell (cell.id)}
										<Subscribe attrs={cell.attrs()} let:attrs>
											<Table.Cell {...attrs}>
												{#if cell.id === 'task'}
													<div class="w-[80px]">
														<Render of={cell.render()} />
													</div>
												{:else}
													<Render of={cell.render()} />
												{/if}
											</Table.Cell>
										</Subscribe>
									{/each}
								</Table.Row>
							</Subscribe>
						{/each}
					{:else}
						<Table.Row>
							<Table.Cell colspan={columns.length} class="h-24 text-center">No results.</Table.Cell>
						</Table.Row>
					{/if}
				</Table.Body>
			</Table.Root>
		</div>
	</ScrollArea>
	<DataTablePagination {tableModel} />
</div>

Am i parsing the store wrongly?