Типскрипт useState React Hook Ошибка деструктуризации (массив не возвращается?)

Я впервые занимаюсь простым приложением React и хочу настроить простой MVC для подключения к бэкэнду ASP.NET, и все это делается в Visual Studio 2019 (что вызвало некоторые проблемы с React). Однако теперь, когда я пытаюсь реализовать модели, я обнаружил, что все предложения по строгой типизации хука useState у меня не работают.

Согласно нескольким руководствам, таким как этот или this, это должно быть так же просто, как добавить тип в скобках, например const [state, setState] = useState<Type>({}), поскольку он имеет общую реализацию. К сожалению, для меня это вызывает ошибку Uncaught TypeError: недопустимая попытка деструктуризации не повторяемого экземпляра.

Этот поток здесь предложил переключиться с array в объект, изменив [] на {}, однако это просто сделало два параметра, которые я передал, неопределенными, поэтому у меня не было состояния или способа обновить указанное состояние.

Я пошел по пути чтения, пока не получил краткое представление о деструктуризации массива, поэтому я понимаю, что идея состоит в том, чтобы передать массив с двумя константами, которым будут назначены элементы массива, возвращаемые хуком useState. Итак, я попытался вручную деструктурировать массив, задав константу useState[0] и useState[1] отдельно. Когда я попробовал это для нетипизированного крючка, все заработало, как и ожидалось. Когда я попробовал это для типизированного хука, я получил несколько ошибок о том, что элементов нет, и при распечатке объекта обнаружил не массив, подобный нетипизированному хуку, а логическое значение. Кажется, что типизированное useState возвращает значение false вместо массива.

На данный момент, как мне кажется, у меня есть некоторые зависимости, которые не реализуют типизированное useState, но я действительно упираюсь в каменную стену при устранении неполадок. Кто-нибудь знает, что я делаю не так?

Изменить: файл тестирования, который я настроил -

import React, { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Product } from '../Models/Product';

const Account = () => {
    //Works as-intended
    const test = useState(5);
    //Returns false when logged
    const test2 = useState<Product>({
        "ProductID": "p#corn", "Description": "Delicious corn", "ImageLink": "https://testlink.com", "Name": "Corn", "Price": "2.99", "Category": "Food"
    });
    
    //What should work, to my understanding, however this makes the route crash when it's navigated to because of the "Inavlid attempt to destructure non-iterable instance
    const [test3, setTest] = useState<Product>({});

    function clickHandler() {
        console.log(test)
    }

    function clickHandler2() {
        console.log(test2)
    }

    return (
        <div className='wrapper'>
            <button onClick={clickHandler}>Test</button>
            <button onClick={clickHandler2}>Test2</button>
        </div>
    )
}

export default Account;

Модель продукта -

 export interface Product {
    ProductID: string;
    Description: string;
    ImageLink: string;
    Name: string;
    Price: string;
    Category: string;
    }