Amplify Studio collection item passing

App.jsx

import * as React from "react";
import { Routes, Route, Link, useNavigate, useLocation } from "react-router-dom";
import { Ampligram, AmpligramCollection } from './ui-components';

const Home = () => {
  let navigate = useNavigate();
  return (
    <div>
      <AmpligramCollection
        overrideItems={({ item, index }) => {
          return {
            onClick() {
              navigate(`post/${item.id}`, {state: {post: item}})
            }
          }
        }}
      />
    </div>
  )
}

const PostDetail = () => {
  let {state} = useLocation();

  return (
    <>
      <Ampligram post={state.post} />
    </>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="post/:id" element={<PostDetail />} />
    </Routes>
  );
}