Json não renderizando

Olá à todos, estou tentando fazer um map de produtos do mesmo modo que é feito no projeto da aluroni, trazendo os dados de um arquivo json, mas não consigo renderizar nada. o que pode estar ocorrendo? eis o código

import "./Produtos.css"
import productions from '../data/produtos.json'
import Produto from "./Produto"
import { useState } from "react";
export default function Produtos(props){
    const [lista, setLista] = useState(productions);
    return(
        <div className="produtos">
            {lista.map(product => (
                  <div className="Products">
                    <Produto id={product.id} {...product} />
                  </div>
                ))}            
        </div>
 )
    }

 import prod from '../../data/produtos.json'
export default function Produto(props) {
    return(
        <figure>
            <img src={prod.imagem}></img>
            <figcaption>(prod.titulo)</figcaption>
            <p>(prod.preco)</p>
            <button className='btn'> Adicionar ao carrinho </button>
         </figure>
    )
}

` `[ { "id": 1, "titulo": "", "preco": 16.90, "imagem": "../public/imagens/ewqee.jpg"

},
{
    "id": 2,
    "titulo": "",
    "preco": 26.89,
    "imagem": "../public/imagens/wwoew.jpg"

},
{
    "id": 3,
    "titulo": "",
    "preco": 17.40,
    "imagem": "../public/imagens/wyywe.jpg"
},
{   
    "id": 4,
    "titulo": "",
    "preco": 2.20,
    "imagem": "/////w"
},
{
    "id": 5,
    "titulo": "",
    "preco": 49.99,
    "imagem": ""
},
{
    "id":6,
    "titulo": "",
    "preco": 5.99,
    "imagem": "zzzzys"
      }

]