React のreact-router-domでの画面遷移時に値が受け渡されない

Question

前提・実現したいこと

Reactでreact-router-domを用いて，ShopCard.jsからDetails.jsに値を受け渡ししたいです．
以下リンクを参考にコードを書きましたが，Details.jsのpropsに値が受け渡されません．
どなたか，詳しい方いいらっしゃいましたら教えていただけると幸いです．

発生している問題・エラーメッセージ

デベロッパーツールでprops確認すると以下が帰ってきます．

Object
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

該当のソースコード

import React, { useState, useEffect, Component } from 'react'
import { Link } from "react-router-dom";
import { withRouter } from "react-router-dom"


export const ShopCard = (props) => {

  const [state, setState] = useState("")

  const handleChange = (e) => {
    setState(() => "test")
  }

  const handleClick = () => {
    props.history.push({
      pathname: "/details",
      state: { text: setState("setState") }
    });
  }

  return (
    <>
        <input type='text' value="test-val" onChange={handleChange}></input>
        <button onClick={handleClick}>????画面遷移????</button>
      </div>
    </>
  )
}
export default withRouter(ShopCard)

import React, { useState, useEffect } from 'react'
import Header from '../modules/Header'
import Footer from '../modules/Footer'
import { Link } from "react-router-dom";


const Details = (props) => {
  console.log(props)

  return (
    <>
      <Header />

      <div>
        <p>画面遷移先のページ</p>
        <p> { props }</p>
      </div>

      <Footer />
    </>
  )
}

export default Details

補足情報（FW/ツールのバージョンなど）

react-router-domのv5使用してます．
ここにより詳細な情報を記載してください。

Answer 1

https://na-ginnan.com/router/

ここのstateの受け渡しを見たらできました！