React link is not redirecting to different sections on same page

Question

I'm beginner to react.js and I'm stuck with a small issue.

I'm making a responsive website and on the footer section I added some links to redirect to the specific section of website like(about, services, contact pages)

Index.js

import {FooterLink,FooterLinkTitle} from './FooterElements'

const Footer = () => {
  return (
......
      <FooterLinkTitle>About Me</FooterLinkTitle>
            <FooterLink to='home' exact='true'>Home</FooterLink>
            <FooterLink to="about" id={"about"} exact="true">About</FooterLink>
            <FooterLink to='discover'>Discover</FooterLink>
            <FooterLink to='services'>Services</FooterLink>
            <FooterLink to='gallery'>Gallery</FooterLink>
            <FooterLink to='contact'>Connect With Me</FooterLink>
            <FooterLink to='contact'>Terms And Condition</FooterLink>
.......
)
}
export default Footer

Here is the FooterElements.js: Here I used styled-components for styling

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

export const FooterLink = styled(Link)`
    color: #fff;
    text-decoration: none;
    margin-bottom: 0.5rem;
    font-size: 14px;
    cursor: pointer;

    &:hover {
        color: #01bf71;
        transition: 0.3s ease-out;
    }
`;

When I click on about or home page its redirecting to a empty page. I tried by putting id inside the FooterLink the result is same and I tried with using component={about} Its showing about page on that link section.

Any suggestion will helpful