Dúvida de como criar a uma página de produto único por react.

Eu não tenho conseguido implementar um método de puxar por id as informações de um produto único no meu projeto de ecommerce. Código da página que lista todos produtos

import styled from 'styled-components'
import { products } from '../../data';
import Product from './Produto';


const Container = styled.div`
padding: 20px;
display: flex;
flex-wrap: wrap;
    justify-content: space-between;
`

const Products = () =>{
    return (
        <Container>
            {products.map(item=>(
                <Product item={item} key={item.id}/>
            ))}
        </Container>
    )
}

export default Products;

No código do produto

const Product = ({item}:any) => {


    return (

        <Container >

            <Link to={"/produtoDetalhe/" + item.id}  >
            <img src={item.imagem} className='imag'/>
            </Link>

            <Box justifyContent='center' display='flex'>
            <Typography>
                {item.nome}

            </Typography>
            </Box>
            <Box justifyContent='center' display='flex'>
            <Typography>
                {item.preco}

            </Typography>
            </Box>
            <Box justifyContent='center' className='display' >
            <Button className='btn'>Comprar</Button>
                </Box>

        </Container>
    )
}

export default Product;

E o código que venho tentado implementar que é a página de detalhes dos produtos

function ProdutoDetalhe() {

    let { id } = useParams<{ id: string }>();
    const location = useLocation() // import from react-router-dom
    const item = location.state
    const Product = ({ item }: any) => {
        return (
            <div>
                <img src={item.imagem} className='imag' />
            </div>
        )
    }
}

export default ProdutoDetalhe;

As rotas já foram criadas e consigo redirecionar, o problema mesmo é puxar a database sendo que esse último código não funciona.