Need help with creating a grid container preview in Slack thread.

preview: {
    select: {
        title: 'title',
        content: 'content'
    },
    prepare({ title, content }) {
        const subs = previewReference(content)
        console.log('subs: ', subs)

        return {
            title: `${title}`,
            subtitle: subs
        }
    }
}

export const previewReference = async(content) => {
    const query = `*[_type == "tool"]{ _id, title }`
    return await client.fetch(query)
    .then(doc => {
        const ids = []
        doc.map(id => ids.push(id))
        return ids
    })
    .then(ids => {
        const filteredArray = []
        content.filter((value, i) => {
            const helper = value.tool._ref

            ids.filter(id => {
                const eyeDee = id._id
                if (eyeDee === helper) {
                    console.log("Got one! ", id.title)
                    filteredArray.push(id.title)
                }
            })
        });

        console.log('filteredArray: ', filteredArray)
        return filteredArray
    })
}

preview: {
    select: {
        title: 'title',
        content0: 'content.0.tool.title',
        content1: 'content.1.tool.title',
        content2: 'content.2.tool.title',
        content3: 'content.3.tool.title',
    },
    prepare({ title, ...content }) {
        const subs = Object.values(content).filter(Boolean);

        return {
            title: `${title}`,
            subtitle: subs.join(', '),
        }
    }
}