Reactのアロー関数の中では何時・何分・何秒は取得できないのか

前提・実現したいこと

ブラウザ上に「現在時刻は何時何分何秒です」と表示させ、その時間に合わせて「おはようございます」「こんにちは」などの挨拶の分岐を実現させたいと思っています。
時間を表示させるだけならば、renderの中で何時・何分・何秒をそれぞれ変数で渡してしまえば済む話かもしれませんが、その時間によって挨拶を分岐させるのであれば、初期値を設定させてからそれぞれのタイムスケールをアロー関数で定義する必要があるのでは？　と考えました。
しかし、アロー関数の中でのgetHours()、getMinutes()、getSeconds()はコンソールの表示でも試してみましたが、すべてunderfindでした。

問題のコード

import React from 'react';

export default class Time extends React.Component{
	constructor(props){
		super(props); 
		this.state = {
			now: new Date().toLocaleString()
		}
	}


	Hour = () => {
		this.setState((state) => { return (
			this.now = this.state.now.getHours()
		    )
		})
	}


	Min = () => {
		this.setState((state) => { return (
			this.now = this.state.now.getMinutes()
		    )
		})
	}


	Sec = () => {
		this.setState((state) => { return (
			this.now = this.state.now.getSeconds()
		    )
		})
	}


/*
	greeting(){
		　　　if(5<=this.Hour && this.Hour<=10){　'おはようございます'　
		    }else if(10<=this.Hour && this.Hour<=17){　'こんにちは'　
		    }else if(17<=this.Hour && this.Hour<=21){　'こんばんみ'　
		    }else{ 'おやすみなさい' }
		}
*/

	render(){
		return(
			<div>
			    <h3>{this.greeting}</h3>
			    <p>現在の時刻は{this.Hour}時{this.Min}分{this.Sec}秒です。</p>
			</div>
			)
	}
}