I have a JSON object which I'm trying to parse into a table using React, however I'm having trouble using .map() to try to create a row for every unique combination of course code, name, transferable_credits, transferable_credits -> institution, transferable_credits -> name, and url. I can't seem to figure out how to get the key-values of the nested arrays within each JSON root key-value pair.

My React component so far:

import data from './data.json'

const Home = () => {

    return ( 
        <div className="home">
            <table>
                <thead>
                    <tr>
                        <th>Course Code</th>
                        <th>Vendor Institution</th>
                        <th>Vendor Course</th>
                    </tr>
                </thead>
            <tbody>
                {Object.keys(data).map(function(key, index) {
                    return (
                        <tr key={index}>
                            <td>{key}</td>
                            {Object.keys(data[key].transferable_credits).forEach(function(key2) {
                                return (
                                    <td>{key2.institution}</td>
                                )
                            })}
                        </tr>
                    )})

                }
            </tbody>
            </table>
        </div>

     );
}
 
export default Home;