React functional component cannot read undefined properties (reading map)

Question

I am trying to parse a json object into a functional component. NavBar component takes argument links as an array (via stringify json). This is then passed to Button where it is used to render buttons.

Any advice would be greatly appreciated.

Code for NavBar:

import React, { useState } from 'react';
import styles from './Components.module.css';
import logo from '../media/logo.png';
import Button from './Button';
import Search from './Search';

type Link = {
    label: string;
    href: string;
};

const Nav: React.FC<{ links: Link[] }> = ({ links }) =>  {
    return (
        <nav className={styles.navbar}>
            <div className={styles.logo_container}>
                <a href={'index'}>
                    <img src={logo} className={styles.logo} alt="logo" />
                </a>
            </div>
            <Button links={links}/>
        </nav>
    )
}

export default Nav;

Code for Button:

import React from 'react';
import styles from './Components.module.css';

type Link = {
    label: string;
    href: string;
};

const Button: React.FC<{ links: Link[] }> = ({ links }) => {
    return (
        <div className={styles['links_container']}>
            {links.map((link: Link) => {
                return (
                    <div key={link.href} className={styles['link']}>
                        <a href={link.href}>
                            {link.label}
                        </a>
                    </div>
                )
            })}
        </div>
    )
};

export default Button;