react-router 编程式导航

import { MyIcon } from '../../images/myIcon.js'
function el(){
     let navigator = useNavigate()
     function doPay() {
        navigator('/dopay', { state: { f:<MyIcon />  } })
        }
     return <>
     <button onClick={()=>{doPay}}> </button>
     </>
}
   

使用编程式导航 当在state中传递值是一个react 组件对象，在对应的页面 使用useLocation() hook接收的state是null,请问是为什么。