I'm a begginer in nextJS and this is my first try using getStaticPaths and getStaticProps, could anyone help me with this issue?

const datas = [
    {
        id: 1,
        name: "Banheiro",
        image: "https://res.cloudinary.com/djf0isef7/image/upload/v1635023151/public/RENDERS/PROJETO%20RNT/BANHEIRO/3_oyr2yf.jpg",
    },
    {
        id: 2,
        name: "Cozinha",
        image: "https://res.cloudinary.com/djf0isef7/image/upload/v1635023151/public/RENDERS/PROJETO%20RNT/COZINHA/2_aenaut.jpg",
    }];

    
    export const getStaticPaths = async () => {
        const paths = datas.map(mod => {
            return { params: { id: mod.id.toString() } }
        });
        return { paths, fallback: false }
    }
    
    export const getStaticProps = async (context) => {
        const id = context.params.id;
        const data = datas.filter((mod) => mod.id.toString() === id)
        return {
            props: {
                datas: data
            }
        }
    }
    
    export default function Projects({ datas }) {
        return (
            <>
                <h1>
                    {datas.id}
                </h1>
            </>
        )
    }

datas.id isn't returning anything, my whole page is white... 😔