estoy tratando de llamar

 var items = { Rice: [{ name: "Diri Djon Djon (Black rice)", Price: "$14.00" }], };

en uno de mis DIVS para que pueda mostrar la variedad de alimentos en este proyecto de página web de menú que estoy haciendo. Ahora sé que estoy construyendo una matriz y lo que me gustaría hacer es mostrar los elementos del menú como lo haría con un archivo json. No tengo experiencia en hacer ninguna de las dos, ya que recién estoy comenzando con reaccionar y JavaScript. Sé que debo estar olvidando algo porque sé que he hecho esto antes. solo quiero llamar a los datos en elementos var o solo elementos para que muestre el nombre del plato y el precio Diri Djon Djon (arroz negro) $ 14.00

Mi código completo está abajo y esto es lo que tengo es reaccionar

 port default function Home(params) { var items = { Rice: [{ name: "Diri Djon Djon (Black rice)", Price: "$14.00" }], }; return ( <> {" "} <h1>Welcome to the best Hatian Resurant in the City!!</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente atque consequatur magnam ex repellat fuga officia corrupti quos distinctio, similique ad praesentium assumenda explicabo dolorum ea aperiam ab blanditiis voluptatum! </p> <hr /> <div className="locate"> </div> <div className="address-text"> <h4></h4> <br /> <div className="phone number"> <h4></h4> </div> <div className="container2"> <img className="image1" src="./images\HaitinFood.png" alt="food" /> </div> </div> <div> <h1>Menue</h1> <h3>ENTRÉES </h3> <div className="container2"> <p>Diri Djon Djon (Black rice) Medium $12 Large $14 </p> </div> </div> <div>{items}</div> </> ); }

Busqué cómo llamar a los archivos json, pero me dijeron que de esta manera es más rápido y en línea, al menos creo. No estoy seguro de estar explicando esto correctamente, pero este es el código de arriba y el de abajo es lo que intenté y todo lo que hice fue borrar toda la página.

La primera imagen es lo que tengo con mi primer intento y la segunda imagen es cuando elimino los <div>{items}</div>