Ejemplo estados complejos

import React, { useState } from 'react';
import Numero from './Numero'
const Contador = () => {
    // Quiero variables dentro de una página de react tengo que utilizar estado
    const [contador, setContador] = useState({ valor: 0, historial: [] });
    const [cadena, setCadena] = useState("")


    const incrementarContador = () => {
        setContador({ valor: contador.valor + 1, 
                    historial: contador.historial.concat("I") });
        setCadena("")
        console.log(contador)
    };
    const decrementarContador = () => {
        if (contador.valor > 0) {
            setContador({ valor: contador.valor - 1, 
                historial: contador.historial.concat("D") });

        } else {
            setCadena("No puedes poner número negativos")
        }

    };
    const resetearContador = () => {
        setContador({ valor: 0, 
            historial: [...contador.historial,"R"] });
        setCadena("")
    };
    return (
        <div>
            <Numero numero={contador.valor} resetear={resetearContador} />
            <p> {cadena}</p>
            <button onClick={incrementarContador}>Incrementar</button>
            <button onClick={decrementarContador}>Decrementar</button>
            <button onClick={resetearContador}>Reset</button>
        </div>
    );
};
export default Contador;