Button navigation not taking user to page and navigation is bleeding into buttonlabel

Question

I have an info section on my website where I list several services and a "Learn More" button that when clicked should take the user to a specific service page.

I have the destination of the button set up in Data.js. To communicate to the button in index.js. The button works when scrolling to "home" on the main page but won't go to a page not on the main page.

The value of navToPage in Data.js is also being added to buttonLabel and I have no idea why.

Thank you for your help!

Here is the code for the services in Data.js

export const homeObjOne = {
  id: "about",
  lightBg: false,
  lightText: true,
  lightTextDesc: true,
  topLine: "Mitchel LTD",
  headline: "Professional & Affordable Services",
  description:
    "We solve complex problems and take the worry out of your hands and off of your mind.",
  buttonLabel: "Get started",
  navToPage: "home",
  imgStart: false,
  img: require("../../images/scales.jpg"),
  alt: "North West Services",
  dark: true,
  primary: true,
  darkText: false,
};

export const homeObjTwo = {
  id: "services",
  lightBg: true,
  lightText: false,
  lightTextDesc: false,
  topLine: "FAQ",
  headline: "We're here to help!",
  description:
    "Have a question? Need an answer?",
  buttonLabel: "Learn More!",
  navToPage: "/faq",
  imgStart: true,
  img: require("../../images/split.jpg"),
  alt: "FAQ",
  dark: false,
  primary: false,
  darkText: true,
};

Here is the index.js code

import React from "react";
import { Button } from "../ButtonElements";

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>
                  <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}
                  >
                    {navToPage}
                    {buttonLabel}
                  </Button>
                </BtnWrap>
              </TextWrapper>
            </Column1>
            <Column2>
              <ImgWrap>
                <Img src={img} alt={alt} />
              </ImgWrap>
            </Column2>
          </InfoRow>
        </InfoWrapper>
      </InfoContainer>
    </>
  );
};

export default InfoSection;