React: passing nested props to a functional component

Question

Maybe it's a dumb question but I can't figure out how to pass a nested prop when I call the component Welcome inside the Wrapper. Does it considered a good practice to use nested properties?. If there are several answers I would like to know all of them.

function Welcome(props) {
  return (
  <>
    <h2>Hello, {props.name}</h2>
    <h2> lastname: {props.name.lastName}</h2>
  </>
  )
}

function Wrapper(props) {
  return(
    <>
      <Welcome name={ 'jota'}    />
    </>
  )
}

Answer 1

You can pass a name object as a prop.

  function Welcome(props) {
  return (
  <>
    <h2>Hello, {props.name.firstName}</h2>
    <h2> lastname: {props.name.lastName}</h2>
  </>
  )
}

function Wrapper(props) {
  return(
    <>
      <Welcome name={{firstName: "Jota", lastName:"Trump"}}    />
    </>
  )
}

Answer 2

This is a simple example.

function Welcome({ person }) {
    const { firstName, lastName } = person;
    return (
        <>
            <h2>Hello, {firstName}</h2>
            <h2> lastname: {lastName}</h2>
        </>
    );
}

export default function Wrapper() {
    const person = { firstName: "Angel", lastName: "Canales" };

    return (
        <>
            <Welcome person={person} />
        </>
    );
}