So I am creating an app using the movie DB API and I have this Actor component where I am passing the actor id to and when I try to use that Id to link to the person webpage for some reason I am passing an object instead. I am trying to pass the number, is there any way to do this?

    import React from 'react';
// Styles
import { Wrapper, Image } from './Actor.style'

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

const Actor = ({name, character, imageUrl, personId}) => {
    console.log(personId);
    return(
        <Wrapper>
            <Link to={`/person/${personId}`}>
                <Image src={imageUrl} alt='actor-thumb' />
            </Link>

            <h3>{name}</h3>
            <p>{character}</p>
        </Wrapper>
    )
}

export default Actor;

So I have these components output to the screen:

And when I click on one of them I get this error: