How can I setup conditional rendering to load different modal content depending on a different button click in Next.js?

I've built a website in Next.js. I'm importing a Modal component where I want to render different content, depending on the button that's clicked. The Modal framework is always the same - so I've set it up as a separate component that passes {children} to it.

I've got the modal working but not sure how to pass different content (basic text and images) for each different button that's clicked. (There will be about 10+ varying pieces of content to load). I'm essentially trying to do an old school jquery fancybox but in a neat react framework using components. Thank you to anyone that's able to offer help!

Example snippet of code:

import React, { useState } from 'react';
import Layout from '../../components/layout'
import Title from '../../components/title'
import Paragraph from '../../components/paragraph'
import Modal from '../../components/modal';
import styles from './styles.module.scss';

export default function MyPage() {
    const [showModal, setModal] = useState(false);
    const toggleModal = () => setModal(!showModal);

    // ...this is what I'm not sure how to do...
    // render() { 
    //     const loadItems = {
    //       bounds: {
    //         image: `images/bounds.jpg`,
    //         image2: 'images/bounds2.jpg'
    //      },
    //      wattle: {
    //         image: `images/wattle.jpg`
    //      }
    //     }

    return (

        <main>
            <Modal visible={showModal} toggleModal={toggleModal} />

            <div className={styles.project}>
              <button onClick={toggleModal} loadItems={bounds}> Hey open bounds content </button>
            </div>

            <div className={styles.project2}>
              <button onClick={toggleModal} loadItems={wattle}> Hey open wattle content </button>
            </div>

        </main>
    )
}

Thank you again!