Svelte error : 'product' is not a store with a subscribe method with shopify api

<script>
import { getProduct } from '../lib/store';
const productId = 'a';
const product = getProduct(productId);
$: console.log($product);

let quantity = 0;
let price = 0;
let total = 0;
$: quantity = quantity < 1 ? 1 : quantity;

$: options = $product.variants.edges.map((items) => {
let list = {};
list.id = items.node.id;
list.color = items.node.selectedOptions[0].value;
list.size = items.node.selectedOptions[1].value;
list.price = items.node.priceV2.amount;
return list;
});

$: console.log(options);

let selected_color;
let selected_size;
let selected;
$: selected = options.filter(function (elem) {
return elem.size === selected_size && elem.color === selected_color;
});

$: if (selected_color && selected_size) {
total = (quantity * selected[0].price).toFixed(2);
}
$: if (selected_color && selected_size) {
console.log('selected variant ID : ' + selected[0].id);
//alert('selected variant ID : '+ selected[0].id)
}
</script>

{#await product}
<h1>
{$product.title}
</h1>
<img
src={$product.images.edges[0].node.originalSrc}
alt="product"
style="width:350px;border-radius:15%;"
/>
<br /><br />
<h3>Color</h3>
{#each $product.options[0].values as option}
<label>
<input bind:group={selected_color} selected="fa" type="radio" name={option} value={option} />
{option}
</label>
{/each}
<h3>Size</h3>
{#each $product.options[1].values as option}
<label>
<input bind:group={selected_size} selected="fa" type="radio" name={option} value={option} />
{option}
</label>
{/each}

{#if selected_color}{selected_color} / {/if}
{#if selected_size}{selected_size}{/if}
<br /><br />
<label for="quantity">Quantity</label>
<input name="quantity" bind:value={quantity} style="width:150px;" type="number" />

<p>
price : $ {total}
</p>

{#if selected_color && selected_size}
<p>
Selected variant ID {selected[0].id}
</p>
{/if}
{/await}


This is my API function store.js

export async function getProduct(handle) {
const query = `
{
productByHandle(handle: "${handle}") {
collections(first: 1) {
edges {
node {
products(first: 5) {
edges {
node {
priceRange {
minVariantPrice {
amount
}
}
handle
title
description
id
images(first: 5) {
edges {
node {
originalSrc
altText
}
}
}
}
}
}
}
}
}
id
title
handle
description
images(first: 5) {
edges {
node {
originalSrc
altText
}
}
}
options {
name
values
id
}
variants(first: 25) {
edges {
node {
selectedOptions {
name
value

}

}
}
}
}
}`;

const response = await ShopifyData(query);

const product = response.data.productByHandle ? response.data.productByHandle : [];

return product;

}