Can lodash be used to render nested properties in a table with Reactjs?

I’m trying to display my table head and table body as separate components and dynamically too, with some nested properties (like genre). I use lodash but I get an error with the tBody rendering. I won’t mind another means to achieve my goal

data for the table body below

  export const data= [
    {
        _id: "5b21ca3eeb7f6fbccd471815",
        title: "Terminator",
        genre: [{_id: "5b21ca3eeb7f6fbccd471818", name: "Action"}],
        numberInStock: 6,
        dailyRentalRate: 2.5,
        publishDate: "2018-01-03T19:04:28.809z"
        
    },
    {
        _id: "5b21ca3eeb7f6fbccd471819",
        title: "Trip to Italy",
        genre: [{_id: "5b21ca3eeb7f6fbccd471814", name: "Comedy"}],
        numberInStock: 7,
        dailyRentalRate: 3.5,
        publishDate: "2018-01-03T19:04:28.809z"
    },
    
    {
        _id: "5b21ca3eeb7f6fbccd47181b",
        title: "Wedding Crashers",
        genre: [{_id: "5b21ca3eeb7f6fbccd471814", name: "Comedy"}],
        numberInStock: 7,
        dailyRentalRate: 3.5,
        publishDate: "2018-01-03T19:04:28.809z"
    }]

here’s columns prop from my parent componentto reduce adding much code

  columns = [
        {path: "title", label: "Title"},
        {path: "genre", label: "Genre"},
        {path: "numberInStock", label: "Stock"},
        {path: "dailyRentalRate", label: "Rate"},
        {
            key: "like",
            content: movie => { <Liked liked={movie.liked} onClick={() => this.props.onLike(movie)} /> }
        },
        {
            key: "delete",
            content: movie =>
            {
                <button
                    onClick={() => this.props.onDelete(movie)}
                    className="btn btn-danger btn-sm">Delete
                </button>
            }
        }
    ]
     

    import React, { Component } from 'react';
    import _ from 'lodash';
    class TableBody extends Component {
      renderCell = (item, column) => {
        if (column.content) return column.content(item);
    
        return _.get(item, column.path);
      };
    
      render() {
        const { data, columns } = this.props;
    
        return (
          <>
            <tbody>
              {data.map((item) => (
                <tr key={item._id}>
                  {columns.map((column) => (
                    <td key={item._id + (column.path || column.key)}>
                      {this.renderCell(item, column)}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </>
        );
      }
    }
    
    export default TableBody;

I get this error when I try my code

Uncaught Error: Objects are not valid as a React child (found: object with keys {_id, name}). If you meant to render a collection of children, use an array instead.