Watch Component using React Hook

Watch.js

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';

import { Strap, Bezel, Screen, Face } from './WatchStyledComponents';
import { DefaultFace } from './WatchFaceComponents';

/**
 * custom Hooks
 * @param {*} d
 */
const useDate = (d) => {
    const [date, setDate] = useState(d);
    useEffect(() => {
        console.log('useEffect called');
        const id = setInterval(() => setDate(moment()), 1000);
        return () => {
            console.log('useEffect flush called');
            clearInterval(id);
        }
    }, []);
    return date;
}

export const Watch = ({ face = date => <DefaultFace date={date} /> }) => {
    const date = useDate(moment());

    return (
        <Strap>
            <Bezel>
                <Screen>
                    <Face>{face(date)}</Face>
                </Screen>
            </Bezel>
        </Strap>
    );

};

Watch.propTypes = { face: PropTypes.func };