Different ways of destructuring props in react

I have seen two ways to destructure props in React.

    function MyComponent({name,age,height}){
            // do stuff here
    }

or

    function MyComponent(props){
            const {name,age,height} = props
            // do stuff here
    }

Suppose this component is used as

<MyComponent name="bob" age={25} height = {175} haspets={false}/>

Here is my questions:

If I used the first way of destructuring, does it mean that I will have no access to other pros, in this case haspets

What are some pros/cons of these two ways?