Use Object in State in React Functional Components

import React, { useState } from 'react';

function App() {

    let [product, setProduct] = useState({
        id: 'p01',
        name: 'name 1',
        price: 5,
        quantity: 6,
        status: true,
        photo: 'thumb1.gif'
    });

    const changeValue = () => {
        product.name = 'abc';
        product.status = false;
        product.price = 8;
        product.photo = 'thumb2.gif';
        setProduct({...product, product});
    }

    return (
    <div>
        <h3>Product Info</h3>
        id: {product.id}
        <br />
        name: {product.name}
        <br />
        price: {product.price}
        <br />
        quantity: {product.quantity}
        <br />
        total: {product.price * product.quantity}
        <br />
        status: {product.status ? 'Show' : 'Hide'}
        <br />
        <img src={'./images/' + product.photo} width="120" />
        <br />
        <input type="button" value="Change Value" onClick={changeValue} />
    </div>
    );
};

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();