Svelte Component Errors: Cannot read properties of null (reading 'current'), TypeError: unsubscribe is not a function

I have a component that accesses a svelte store writable but the component just gets rendered before the data arrives into the store variable.

This are the errors enter image description here

I want this component to start rendering when there is some data in currentOneCallData.

<script>
  import { onDestroy, onMount } from "svelte";
  import rain from "../assets/icons/d-rain.png";
  import { currentOneCallData } from "../cli";

  let unsubscribe;
  let loading = true;

  onMount(() => {
    unsubscribe = currentOneCallData.subscribe(value => {
      if(value !== undefined){
        loading = false;
        unsubscribe();
      }
    })
  })

  onDestroy(() => {
    if(unsubscribe) {
      unsubscribe(); 
    }
  });

  function convertUnixTimestamp(timestamp) {
    const months = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ];
    const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    // Convert timestamp to milliseconds
    const date = new Date(timestamp * 1000);

    // Extract day, month, and date
    const day = days[date.getDay()];
    const month = months[date.getMonth()];
    const dayOfMonth = date.getDate();

    // Concatenate and return formatted date
    return `${day}, ${month} ${dayOfMonth}`;
  }
</script>

I have also implemented conditional logic that prevents it from accessing data from object before its available.

{#if !loading}
  <div class="current-container">
    <div class="text-content">
      <div class="dateAndTime">
        <p class="date">{convertUnixTimestamp($currentOneCallData.current.dt)}</p>
        <p class="time">7:40 AM</p>
      </div>
      <p class="temp">{$currentOneCallData.current.temp}<sup class="temp-unit">°C</sup></p>
      <h4 class="feel-container">
        Feels like <span class="feel"
          >{$currentOneCallData.current.feels_like} <span class="temp-unit">°C</span></span
        >
      </h4>
      <h3 class="desc">{$currentOneCallData.current.weather[0].description}</h3>
    </div>
    <div class="icon-container">
      <img src={rain} alt="" class="icon" />
    </div>
  </div>
{:else}
  <div class="loading"><p>Loading...</p></div>
{/if}