(React) I have two buttons on my main page but can only style one

Question

I have two buttons on my main pages.

Button one is for scrolling to elements on the main page.

Button two is for linking to other pages on my website.

Button 1 is from react-scroll while Button 2 is from react-router-dom

Currently button 1 scrolls properly and displays styling correctly. However button 2 links to other pages but does not display any styling and displays the property of "navToPage" rather than the value of "buttonLabel".

How can I correct this so that both buttons have styling and fuctionality?

Here is the code from Data.js that feeds into index.js

export const homeObjOne = {
  id: "about",
  lightBg: false,
  lightText: true,
  lightTextDesc: true,
  topLine: "Freeman Ltd",
  headline: "Professional & Affordable Services",
  description:
    "We enjoy helping our clients by utilizing over 20 years of experience.",
  buttonLabel: "Get started",
  imgStart: false,
  img: require("../../images/scales.jpg"),
  alt: "North West",
  dark: true,
  primary: true,
  darkText: false,
  navToPage: "services",
};

export const homeObjTwo = {
  id: "services",
  lightBg: true,
  lightText: false,
  lightTextDesc: false,
  topLine: "FAQ",
  headline: "We are here to help!",
  description:
    "Have Questions? We have answers.",
  buttonLabel: "Learn More!",
  imgStart: true,
  img: require("../../images/faq.jpg"),
  alt: "FAQ",
  dark: false,
  primary: false,
  darkText: true,
  navToPage: "/faq",
};

Here is index.js

import React from "react";
import { Button } from "../ButtonElements";
import { PageButton } from "../ButtonPageElements";
import { Link } from "react-router-dom";

import {
  InfoContainer,
  InfoWrapper,
  InfoRow,
  Column1,
  Column2,
  TextWrapper,
  TopLine,
  Heading,
  Subtitle,
  BtnWrap,
  ImgWrap,
  Img,
} from "./infoElements";

const InfoSection = ({
  lightBg,
  id,
  imgStart,
  topLine,
  lightText,
  headline,
  darkText,
  description,
  buttonLabel,
  img,
  alt,
  primary,
  dark,
  dark2,
  navToPage,
}) => {
  return (
    <>
      <InfoContainer lightBg={lightBg} id={id}>
        <InfoWrapper>
          <InfoRow imgStart={imgStart}>
            <Column1>
              <TextWrapper>
                <TopLine>{topLine}</TopLine>
                <Heading lightText={lightText}>{headline}</Heading>
                <Subtitle darkText={darkText}>{description}</Subtitle>
                <BtnWrap>
                  {navToPage && navToPage.startsWith("/") ? (
                    //if it is linked to another page use router link
                    <Link to={navToPage} style={{}}>
                      {navToPage}
                    </Link>
                  ) : (
                    //else use the smart link component
                    <Button
                      to={navToPage}
                      smooth={true}
                      duration={500}
                      spy={true}
                      exact="true"
                      offset={-80}
                      primary={primary ? 1 : 0}
                      dark={dark ? 1 : 0}
                      dark2={dark2 ? 1 : 0}
                    >
                      {buttonLabel}
                    </Button>
                  )}
                </BtnWrap>
              </TextWrapper>
            </Column1>
            <Column2>
              <ImgWrap>
                <Img src={img} alt={alt} />
              </ImgWrap>
            </Column2>
          </InfoRow>
        </InfoWrapper>
      </InfoContainer>
    </>
  );
};

export default InfoSection;

Here is the code for ButtonElements.js

import styled from "styled-components";
import { Link } from "react-scroll";

export const Button = styled(Link)`
  border-radius: 50px;
  background: ${({ primary }) => (primary ? "#ca1f27" : "#010606")};
  white-space: nowrap;
  padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
  color: ${({ dark }) => (dark ? "#010606" : "#fff")};
  font-size: ${({ fontBig }) => (fontBig ? "20px" : "16px")};
  outline: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;

  &:hover {
    transition: all 0.2s ease-in-out;
    background: ${({ primary }) => (primary ? "#fff" : "#ca1f27")};
  }
`;

Here is the code for ButtonPageElements.js

import styled from "styled-components";
import { Link } from "react-router-dom";

export const PageButton = styled(Link)`
  border-radius: 50px;
  background: ${({ primary }) => (primary ? "#ca1f27" : "#010606")};
  white-space: nowrap;
  padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
  color: ${({ dark }) => (dark ? "#010606" : "#fff")};
  font-size: ${({ fontBig }) => (fontBig ? "20px" : "16px")};
  outline: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;

  &:hover {
    transition: all 0.2s ease-in-out;
    background: ${({ primary }) => (primary ? "#fff" : "#ca1f27")};
  }
`;