React Issue With Conditional Then Map - reactjs

Question

I have some react code that checks if an array has any elements. If it does, then it should map over the elements and display them. I am able to do the check but the map throws an error, and I do not know why.
Here is the function:
function MetalOptions() {
const metals_options = GetsOptions(product,"Metal");
if (metals_options.length > 0) {
return(
<React.Fragment>
<h1>yes</h1>
<ul>
{metals_options.map((option,index) =>
<li key={index}>{option}</li>
)}
</ul>
</React.Fragment>
);
}
}
Here is the entire render function:
render() {
const { isLoading, productID, product} = this.state;
function GetsOptions(product,kind) {
const variant_metals = [];
product.variants.map((variant) =>
variant.option_values.map((option) =>
variant_metals.push({type: option.option_type_name,value: option.presentation})
)
);
const filter_variant_metals = variant_metals.filter(item => item.type === kind);
const output = [...new Set(filter_variant_metals.map(s => JSON.stringify(s)))].map(s => JSON.parse(s));
return output;
}
function GetsVariantImages(product) {
const variant_images = [];
product.variants.map((variant) =>
variant.images.map((image) =>
variant_images.push({
original: image.product_url,
thumbnail: image.small_url,
description: image.alt,
originalAlt: image.alt,
thumbnailAlt: image.alt
})
)
);
const output4 = [...new Set(variant_images.map(s => JSON.stringify(s)))].map(s => JSON.parse(s));
return output4;
}
if (isLoading) {
return <div className="sweet-spinner">
<BounceLoader
sizeUnit={"px"}
size={30}
color={"#494847"}
loading={isLoading}
/>
</div>
}
function MetalOptions() {
const metals_options = GetsOptions(product,"Metal");
const metals_options_array = Object.values(metals_options);
if (metals_options.length > 0) {
return(
<React.Fragment>
<h1>yes</h1>
<ul>
{metals_options_array.map((option,index) =>
<li key={index}>{option}</li>
)}
</ul>
</React.Fragment>
);
}
}
const size_options = GetsOptions(product,"Center Diamond Size");
const shape_options = GetsOptions(product,"Center Diamond Shape");
return (
<div>
<div className="container">
<div className="row">
<div className="col-md-7">
{product.master.images.length >= 3?
<section className="main-image-grid">
{product.master.images.slice(0,3).map(image =>
<img key={image.id} src={image.large_url} alt={image.alt}/>
)}
</section>:
<section className="main-image-grid">
{product.master.images.slice(0,1).map(image =>
<img key={image.id} src={image.large_url} alt={image.alt}/>
)}
</section>
}
</div>
<div className="col-md-5 gradient-silver">
<h1 className="text-center">{product.name}</h1>
<p className="text-center">Your Price {product.display_price}</p>
<div className="cta">
<a href={"sms:[phone]&body=Hello!%20I%20want%20more%20information%20on%20"+product.name}>Text For More Info!</a>
Call To Take A Look
</div>
<h2>Select Your Options</h2>
<MetalOptions />
<p>This comes in various options listed below:</p>
{GetsOptions(product,"Metal").length > 0 &&
<h4>yes</h4>
}
{GetsOptions(product,"Center Diamond Shape").length > 0 &&
<h2>
You have Center Diamond Shape {GetsOptions(product,"Center Diamond Shape").length} Options.
<ul>
</ul>
</h2>
}
{GetsOptions(product,"Center Diamond Size").length > 0 &&
<h2>
You have Center Diamond Size {GetsOptions(product,"Center Diamond Size").length} Options.
</h2>
}
</div>
</div>
<hr className="style-two"/>
<ul className="nav justify-content-center" id="productTab" role="tablist">
<li className="nav-item">
<a className="nav-link active" id="center-tab" data-toggle="tab" href="#center" role="tab" aria-controls="center" aria-selected="false">Center Gemstones</a>
</li>
<li className="nav-item">
<a className="nav-link" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a>
</li>
<li className="nav-item">
<a className={"nav-link " + (product.product_properties.length < 0 && 'disabled')} id="properties-tab" data-toggle="tab" href="#properties" role="tab" aria-controls="properties" aria-selected="false">Properties</a>
</li>
</ul>
<div className="tab-content" id="myTabContent">
<div className="tab-pane fade show active" id="center" role="tabpanel" aria-labelledby="center-tab">
<h3 className="h5 text-uppercase text-center">The Center</h3>
<p class="h6 text-center text-muted"><small>Deciding on a center diamond or gemstone is the <span className="text-uppercase font-weight-bold">important decision.</span> The center diamond holds the sentiment and value. If your piece of jewelry is a play, the mounting is a stage, and the center is the actors and script.</small></p>
<p class="h6 text-center text-muted"><small>We have helped so many in Kansas City find beautiful diamonds or gemstones in all qualities and price ranges usually complete with a GIA grading report. We would be honored to help you to your perfect one.</small></p>
<DiamondLinks />
<GemLinks />
</div>
<div className="tab-pane fade" id="description" role="tabpanel" aria-labelledby="description-tab"><p className="text-center">{product.description}</p></div>
<div className="tab-pane fade" id="properties" role="tabpanel" aria-labelledby="properties-tab">
{product.product_properties.map((property,index) =>
<p><span className="font-weight-bold">{property.property_name}:</span> {property.value}</p>
)}
</div>
</div>
</div>
<hr className="style-two"/>
<h2>More Pictures</h2>
<ImageGallery items={GetsVariantImages(product)} lazyLoad={true} showThumbnails={true} thumbnailPosition={'left'}/>
</div>
);
}
}
Any ideas? Thank you for your help!