ES6 destructure and spread together as arguments into a React Component

Question

I understand ES6 destructure and spread operators, but I am confused by their usage together. Can someone break this down into a way a layman can understand?

const index = ({title, description, ...props}) => {
  return (
    <div>
      
    </div>
  )
}

How does this work?

Answer 1

Something like this. Where everythingElseExceptTitleAndDescription creates a new object with all enumerable own properties of the argument except title and description

const index = (arg) => {
  let title = arg.title;
  let description = arg.description;
  let props = everythingElseExceptTitleAndDescription(arg);
  return (
    <div>
      
    </div>
  )
}