[Projeto] Outra resolução

Resolvi o desafio de forma diferente, e gostaria de mostrar aqui:

componente Recomendados(criado):

import PostCard from "components/PostCard"
import styles from "./Recomendados.module.css"


import posts from "json/posts.json"

function Recomendados({ postAtual }) {

    return (
        <div className={styles.recomendados}>
            <h2 className={styles.titulo}>
                Outros posts que você pode gostar:
            </h2>
            <ul className={styles.listaRecomendados}>
            {posts.map((post, index) => {
                if (post.id !== postAtual.id && index <= 4) {
                    return(
                        <li>
                            <PostCard post={post} mt={''}/>
                        </li>
                    )
                }
            })}
            </ul>

        </div>
    )
}

export default Recomendados

pagina Post:

import "./Post.css"

import { Route, Routes, useParams } from "react-router-dom";

import posts from "json/posts.json"
import PostModelo from "components/PostModelo";
import ReactMarkdown from "react-markdown";
import NaoEncontrada from "paginas/NaoEncontrada";
import PaginaPadrao from "components/PaginaPadrao";
import Recomendados from "components/Recomendados";

export default function Post() {
    const parametros = useParams();

    const post = posts.find((post) => {
        return post.id === parseInt(parametros.id)
    })

    if (!post) {
        return (
            <NaoEncontrada />
        )
    }

    return (
        <Routes>
            <Route path="*" element={<PaginaPadrao />}>
                <Route index element={
                    <PostModelo
                        fotoCapa={`/assets/posts/${post.id}/capa.png`}
                        titulo={post.titulo}
                    >
                        <div className="post-markdown-container">
                            <ReactMarkdown>
                                {post.texto}
                            </ReactMarkdown>
                        </div>

                        <Recomendados postAtual={post}/>

                    </PostModelo>
                }>
                </Route>
            </Route>
        </Routes>
    )
}