state : unknown quando quero pegar o dados no useLocation

Olá estou tendo dificuldade em achar a solução para usar o state no useLocation

import { useNavigate } from "react-router-dom"
import { BtnStyled } from "../button/btn.styled"
import { ItemStyled } from "./item.styled"

interface Props{
    url:string,
    name:string,
    id?: string
}

export function Item (prop : Props){

    let navigate = useNavigate()

    function redirecionaDetalhe(prop: Props){
        navigate(`/meme/${prop.id}`, {state: prop})
    }

    return (
        <ItemStyled>
            <img src={prop.url} alt="" />
            <p>{prop.name}</p>
            <BtnStyled bgColor="transparent" color="blue" width="4.5rem" pad=".5rem 0" onClick={()=>redirecionaDetalhe(prop)}>Ver mais</BtnStyled>
        </ItemStyled>
    )
}

código que manda para a janela de detalhe do produto

import { useLocation } from 'react-router-dom'


function More() {

  const { state } = useLocation()
  return (
    <div>
      <h1>{state.name}</h1>
    </div>
  )
}

export default More

janela do detalhe, quando dou console.log(state) ele aparece os valores que preciso mas quando vou utilizar state.name ou qualquer outro state. ele trás o erro de const state: unknown, acredito que seria um erro de tipagem, tentei diversas maneiras mas ainda não consegui resolver como poderia encontrar a solução?