javascript - react-router-dom リンクを介して状態を変更する方法は?

Question

画像をクリックしたときに Link コンポーネントを介して状態を変更しようとしています。Link コンポーネントがどのように記述されているのか、それともclickHandler間違って使用されているのかはわかりませんが、クリックした後でも、コンソールは状態を true としてログに記録します。

import React, {useState, useEffect} from 'react'
import {Link, Switch, Route} from 'react-router-dom'
import RecipePage from './RecipePage'
export default function Recipes({dataArray}){

const [strMeal, setStrMeal] = useState(true)

function clickHandler(){
    setStrMeal(false)
}




return(
    <div>
        <Link to={{pathname:'/recipepage', state: {strMeal: strMeal} }}>
            <div onClick={() => clickHandler()}>This is an image</div>
        </Link>
    </div>
    
)

}

状態を false に変更するにはどうすればよいですか?