how can i specify that product is of type IProduct in this scenario?

import React, {useEffect, useState} from "react";
import axios from "axios";
import {useToast} from "../context/ToastContext";
import {useUser} from "../context/UserContext";
import {Link} from "react-router-dom";
import Card from "react-bootstrap/Card";

interface IProduct {
    _id: string,
    name: string,
    model: string,
    image: string,
    description: string,
    price: {
        single: number,
        loyalty: number,
    },
    categories: string[] | [],
    similar: string[] | []
}

export function DetailedProduct({id}: {id: string}) {
    const {displayToast, setVisibility} = useToast()
    const {user} = useUser()
    const [isLoaded, setLoading] = useState(false)
    const [product, setProduct] = useState({
        _id: "",
        name: "",
        model: "",
        image: "",
        description: "",
        categories: [],
        price: {single: undefined, loyalty: undefined},
        similar: [],
    } as const)

    const {
        _id,
        categories,
        description,
        image,
        similar,
        model,
        name,
        price,
    } = product as Record<keyof typeof product, string | number | object | string[]>;

    console.log({id, _id})
    async function getProduct() {
        try {
            const response = await axios.post('/api/getProduct', {id, user})
            setProduct(response.data)
            setLoading(true)
        } catch (error) {
            setVisibility(true)
            displayToast("error", "Ошибка получения данных от сервера")
            setLoading(true)
        }
    }

    useEffect(() => {
        getProduct()
    }, [id])

    const displaySimilar = similar.map((item) => {
        const hasDiscount = user && (!(user.Category !== "Пользователь") || user.Category !== undefined)

        return <div className="col-6 col-md-4 col-xl-2 my-3" key={item._id}>
            <Card className="h-100">
                <Link to={`/product/${item._id}`}>
                    <Card.Img variant="top" src={'/api/static/' + item.image}/>
                </Link>
                <Card.Body className="bg-light pb-0 d-flex flex-wrap justify-content-between align-self-stretch">
                    <Card.Title className="fs-6">
                        <Link to={`/product/${_id}`} className="text-black fw-bold ">
                            {item.name}
                        </Link>
                    </Card.Title>
                    <Card.Subtitle className="mb-3 mx-3">
                        <div className="w-100 text-center fw-semibold">
                            <div>{item.price.single.toFixed(2)} MDL</div>
                            {hasDiscount && <div>{item.price.loyalty.toFixed(2)} MDL</div>}
                        </div>
                    </Card.Subtitle>
                </Card.Body>
            </Card>
        </div>
    })

    function onChangeHandler(e: React.ChangeEvent<HTMLInputElement>) {
        return null
    }

    return (
        <div className="container">
            {isLoaded && <div className="row border border-secondary g-0">
                <div className="col-md-4">
                    <img className="img-fluid" src={`/api/static/${image}`}/>
                    <div className="d-flex mx-2 justify-content-center">
                        {categories.map(category => {
                            return <div className="border border-secondary rounded-pill small d-inline-block px-1 my-2"
                                        key={category}>{category}</div>
                        })}
                    </div>
                </div>
                <div className="col-md-8">
                    <div className="border-bottom border-secondary fs-4 text-center text-black fw-bold px-2">
                        {name} ({model})
                    </div>
                    <div className="px-2 my-2">
                        {description}
                    </div>
                    <div className="fs-4 px-2 row">
                        <div className="col-sm-6">
                            {price.single.toFixed(2) + " MDL" || "ОШИБКА"}
                        </div>
                        <div className="w-50 align-self-center">
                            <input type="number" value={1} className="w-100 p-1" onChange={(e) => onChangeHandler(e)}/>
                        </div>
                    </div>
                    <div className="text-center mt-3">
                        <button className="btn btn-primary rounded-0 w-100">В корзину</button>
                    </div>
                </div>
                <div className="fs-3 text-center border-top border-secondary">Похожие товары:</div>
                <div className="row align-self-center g-1">
                    {displaySimilar}
                </div>
            </div>}
        </div>
    )
}