Similar to strings, numbers, and other JavaScript expressions, you can pass objects through props in JSX by wrapping them using curly braces {}.
Since objects are also written using curly braces in JavaScript, like { name: "John Doe", email: "johndoe@example.com" }, you must wrap the object in another pair of curly braces to pass it via props:
The first bracket is to let JSX identify this as a JavaScript expression. The second one is to denote that it is an object.
You may see this with inline CSS styles in JSX. When you need an inline style, you can pass an object to the style attribute: