React, availableForSale: true to display Text when true – Shopify

I am using Shopify as my backend and react as my frontend, and when the product.availableforsale is true I want it to print out in stock. Here is the code on my product page.
I have commented on the code where the {product.availableForSale} is in the product page component.

import React, { useEffect, useContext, useState } from "react";
import { useParams } from "react-router-dom";
import { ShopContext } from "../../context/shopContext";
import { Text, Div, Button, Row, Col, Container, Image } from "atomize";
import { Link } from "react-router-dom";
import "./ProductPage.css";
import { Spinner } from 'react-bootstrap';
//Res
// const theme = {
//   grid: {
//     colCount: 8,
//     gutterWidth: 0
//   }
// };

const ProductPage = () => {
  let { id } = useParams();
  const { fetchProductWithId, addItemToCheckout, product, client } = useContext(
    ShopContext
  );

  //Fav
  const [favoriteText, setFavoriteText] = useState("Add to Favorite");

  //Variants
  const [sizeIndex, setSizeIndex] = useState('');
  const [posterIndex, setPosterIndex] = useState('');
  

  useEffect(() => {
    fetchProductWithId(id);
    return () => {};
  }, [fetchProductWithId, id]);

  if (!product.title) return <div className="prod-spinner-container"><Spinner animation="border" variant="primary" /></div>

//Variants
  const selectedVariant = client.product.helpers.variantForOptions(product, {
    Size: sizeIndex || product.options[0].values[0].value,  
     Poster: posterIndex || product.options[1].values[0].value
  });

  return (

    <Container>
      
      <div className={"row"} >
      
      <Div className="prod-img" p="1.5rem">
          <Image src={product.images[0].src} w="20rem" p="2rem"/>
      </Div>
      <div className="prod-size col-12 col-sm-6  " pos="Center" key={product.id}>
          <Text className="title-txt"tag="h1" textColor="white" textWeight="500" m={{ y: "2rem" }} >
            {product.title}
          </Text>

          <Text className="title-txt"tag="h1" textColor="white" textWeight="500" m={{ y: "2rem" }} >
            {/* Print Out text? */}
            {product.availableForSale}
            {product.vendor}
          </Text>

          {/* Selected variant will allow the price to change due to frame size etc */}
          
          <Text className="cost-txt" tag="h3" textColor="white" m={{ y: "2rem" }} textWeight="100">
         Price € {selectedVariant?.price} Excl Shipping
          </Text>

          {/* Poster size */}
          <Text>Size (inc)</Text>
          <select className="custom-select" value={posterIndex} onChange={e => setPosterIndex(e.target.value)} >
            {product.options[1].values.map((item, index) => (
              <option value={item.value}>{item.value}</option>
            ))
            }
          </select>         

          <Text>Frame</Text>
          <select className="custom-select" value={sizeIndex} onChange={e => setSizeIndex(e.target.value)} >
            {product.options[0].values.map((item, index) => (
              <option value={item.value}>{item.value}</option>
            ))
            }
          </select>


          <Button
            rounded="lg"
            shadow="3"
            bg="black500"
            m={{ y: "2rem" }}
            onClick={() => addItemToCheckout(selectedVariant?.id, 1)}
          >
            Add to Cart
          </Button>
          <Button  rounded="lg"
            shadow="3"
            bg="black500"
            m={{ y: "2rem" }}
            onClick={() => {
            // console.log(product);
            let favorites = JSON.parse(localStorage.getItem('favorites') || "[]");
            const productExists = favorites.find(favorite => favorite.id === product.id);
            if(productExists) {              
              favorites = favorites.filter(favorite => favorite.id !== product.id);
              setFavoriteText("Add to Favorite")
              localStorage.setItem('favorites', JSON.stringify(favorites));
              
            } else {
              favorites = [...favorites, product];
              setFavoriteText("Remove from Favorite");
              localStorage.setItem('favorites', JSON.stringify(favorites));
            }

          }}>
             {/* <HeartIcon title="Add to Favourites" style={{height: '25px', width: '25px', backgroundColor: "#fff", color: "red" }} /> */}
            {favoriteText}
          </Button>
        </div>
      </div>
    </Container>
  );
};

export default ProductPage;

Any help would be greatly appreciated thanks. Please let me know if more code is needed thanks