関数を汎用的にしたい

実現したいこと

createHeadingという関数を利用して、categories, otherCategoriesの値をそれぞれ出力したい。
配列同士の結合は避けたい。
現在は、categoriesの出力までは上手くいっているが、otherCategoriesの値を出力させることができずにいます。

propsで渡してcreateHeadingの引数に入れてあげるイメージだと思うのですが、具体的なコードが思いつかずご教示ください。
よろしくお願いします。

該当のソースコード

javascript

import React from 'react'; const CategoriesLink = (props) => { const categories = [ { _id: '/red', name: 'red' }, { _id: '/blue', name: 'blue' }, ] const otherCategories = [ { _id: '/green', name: 'green' }, { _id: '/yellow', name: 'yellow' }, ] return ( <CategoriesLinkPresentation categories={categories} otherCategories={otherCategories} /> );}; export const CategoriesLinkPresentation = (props) => { const createHeading = (index) => { return !props.categories[index] ? ( '' ) : ( <h3 key={props.categories[index]._id}> <a href={props.categories[index]._id + '/'}> {props.categories[index].name} </a> </h3> ); }; return ( <div className="wrapper"> <div> {createHeading(0)} </div> <div> {createHeading(1)} </div> <div> {createHeading(2)} </div> <div> {createHeading(3)} </div> </div> );}; export default CategoriesLink;