React - проблемы с массивом map, пустые абзацы

У меня есть объекты, которые проходят через map, все было нормально, пока я не добавил свойство "title" при рендеринге, отображались пустые абзацы https://ibb.co/hfp07t9

JavaScript_Lessons_Objects.js

import React from "react";
import jsStyle from  "./css/JavasCript_Lesson.module.css";
import {faDotCircle} from "@fortawesome/free-solid-svg-icons/faDotCircle";

const one = "Robby";

function JavaScriptLessonObject() {

    return (
        [
            {
                title: [<div><span className={jsStyle.title}>JSON OBJECTS</span></div>],
            },

            {
                titleName: "JS Introduction",
                iconName: faDotCircle,
                description: [
                    <span className="yourClass">{one}</span>,
                    ` advanced diverted domestic sex repeated bringing you old.`
                ],
            },

            {
                titleName: "JS Where To",
                iconName: faDotCircle,
                description: [
                    <span className="yourClass">{one}</span>,
                    ` advanced diverted domestic sex repeated bringing you old.1`
                ],
            },

            {
                title: [<div><span className={jsStyle.title}>JSON OBJECTS</span></div>],
            },

            {
                titleName: "JS Output",
                iconName: faDotCircle,
                description: [
                    <span className="yourClass">{one}</span>,
                    ` advanced diverted domestic sex repeated bringing you old.`
                ],
            },

        ]
    );
}

export default JavaScriptLessonObject;

Lesson.jsx

import React from 'react';
import less from "./css/lesson.module.css";
import "./css/betaLesson.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Navbar } from "../../../Navbar/Navbar";

export class Lessons extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            indexDescription: 0,
        }
    }

    render() {
        const listLessons = this.props.lesson.map((item, index) => {
            return (
                <div key={index}>

                    <li style={{background: "#ffa50070"}}>
                        <div>
                            <p>{item.title}</p>
                        </div>
                    </li>
                    
                    <li onClick={() => { this.setState({ indexDescription: index }) }}>
                        <div className={less.sidebar_list}>
                            <div>
                                <FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
                            </div>

                            <div className={less.titleName}>
                                <div>
                                    <p>{item.titleName}</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </div>
            );
        });

        return (
            <>
                <div className="abc">
                    <Navbar color="blue" bg="tomato" centerFlexNavbarContainer="flex"
                        navbarSearchPage="Search" navbarHomePage="Home" centerHeadlineNavbarColumn="center" />
                    <div className={less.wrapper}>

                        <div>
                            <div className={less.sidebar}>
                                <div>
                                    <ul>
                                        {listLessons}
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div className={less.main_content}>
                            <div className={less.main_inside_content}>
                                <div className={less.header}>
                                    <div>
                                        <h2>JavaScript JSON Reference</h2>
                                    </div>
                                </div>
                                <div className={less.info}>
                                    <div className={less.description}>
                                        <p>
                                            {
                                                this.props.lesson[this.state.indexDescription]["description"]
                                            }
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

Я думаю, что проблема ясна, когда я добавил в заголовочный объект: [<div> <span className = {jsStyle.title}> JSON OBJECTS </span> </div>], я получил пустые абзацы. Я специально установил оранжевый цвет, чтобы было легче ориентироваться, кроме того я в конце добавил некий код обратите пожалуйста на это внимание <p>{item.title ? item.title : "Пустые абзацы"}</p> и вот результат https://ibb.co/1qHn1fr мне нужно избавится от Пустых абзац