Mapping Data Returning Same Value - Gatsby - reactjs

Question

I'm mapping over some data (3 image slides i have stored in a headless cms). I am passing the retuned data into slide component, and from there its being passed down to a button component, which is just a 'gatsby-link'. The mapped data contains a "page_link", among other things that should be different for each slide. However, for some reason the same "page_link" is being passed down to each button, even though they should all be different. I am logging my data in the console and can confirm that each array i am mapping over contains different data. I get the different image, title, text, etc fields for each slide, but i am recieving the same "page_link" for each slide. I am confused as to what i am doing wrong.
Heres my code:
GraphQl Query:
const HOMEPAGE_DATA = graphql`
query {
prismicHomePage {
data {
body {
slider {
title {
text
}
text {
text
}
page_link{
text
}
button_text{
text
}
image {
localFile {
childImageSharp {
fluid(maxWidth: 1280, quality: 90) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
}
}
}
}
`
// get homepage data
const data = useStaticQuery(HOMEPAGE_DATA)
// simplify data
const home_data = data.prismicHomePage.data
Mapped Data:
{home_data.slider.map((slide, index) => {
console.log(slide)
return (
<Slide
key={slide.title.text}
title={slide.title.text}
image={slide.image.localFile.childImageSharp.fluid}
text={slide.text.text}
button_text={slide.button_text.text}
path_link={slide.page_link.text}
/>
)
})}
Slide Component:
const Slide = props => {
return (
<StyledBackgroundImage fluid={props.image} alt={`${props.title}`}>
<Wrapper>
<SlideContent>
<h1>{props.title}</h1>
<p>{props.text}</p>
<div className="slide-btn">
<Button path={props.path_link} text={props.button_text} />
</div>
</SlideContent>
</Wrapper>
</StyledBackgroundImage>
)
}
Button Component:
The is just a Styled "Link" Component from Gatsby.
const Button = props => {
return (
<StyledButton to={props.path} title={`${props.text}`}>
{props.text}
</StyledButton>
)
}