React display condition

I'm trying to display a message fetched from an API, but sometimes it's Message Packs I get, kind of like this:

In first image, we can see "isPack" on False and i have "message" (without "s") In second image, we have "isPack" on True and i have "messages", is an array with other messages. I can stock all data and display "current_data.message" but i cant display "current_data.messages" because is an array. And .map() doesnt work (he display me : [object Object]1[object Object]1[object Object]1)

My component :

import React, { useState, useEffect, ChangeEvent } from "react";
import TutorialDataService from "../services/TutorialService";
import { Link } from "react-router-dom";
import ITutorialData from "../types/Tutorial";
import { Form, Tabs, Tab } from "react-bootstrap";
import IconLoupe from "../assets/IconLoupe.png";

const TutorialsList: React.FC = () => {
  const [tutorials, setTutorials] = useState<Array<ITutorialData>>([]);
  const [currentTutorial, setCurrentTutorial] = useState<ITutorialData | null>(
    null
  );
  const [currentIndex, setCurrentIndex] = useState<number>(-1);
  const [searchTitle, setSearchTitle] = useState<string>("");

  useEffect(() => {
    retrieveTutorials();
  }, []);

  const onChangeSearchTitle = (e: ChangeEvent<HTMLInputElement>) => {
    const searchTitle = e.target.value;
    setSearchTitle(searchTitle);
  };

  const retrieveTutorials = () => {
    TutorialDataService.getAll()
      .then((response: any) => {
        setTutorials(response.data.data.favourite_conseils);
        console.log(response.data.data.favourite_conseils);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  const refreshList = () => {
    retrieveTutorials();
    setCurrentTutorial(null);
    setCurrentIndex(-1);
  };

  const setActiveTutorial = (tutorial: ITutorialData, index: number) => {
    setCurrentTutorial(tutorial);
    setCurrentIndex(index);
  };

  return (
    <div className="list row">
      <span className="font-link-bold" style=>
        <span className="font-link-blue-bold">Mes</span> Conseils
      </span>
      <br />
      <br />
      <span
        className="font-link"
        style=
      >
        Saisir vos mots-clés ou coller un texte :
      </span>
      <br />
      <br />
      <div className="col-md-8">
        <div className="input-group mb-3">
          <form action="/" method="GET" className="form">
            <input
              type="search"
              placeholder="Search"
              className="search-field"
            />
            <button type="submit" className="search-button">
              <img src={IconLoupe} alt="" />
            </button>
          </form>
        </div>
      </div>

      <div className="col-md-12">
        <Tabs
          defaultActiveKey="recents"
          id="uncontrolled-tab-example"
          className="mb-3 background-tabs"
        >
          <Tab eventKey="recents" title="Récents (7)">
            <div className="col-md-12">
              <ul className="list-group">
                {tutorials &&
                  tutorials.map((tutorial, index) => (
                    <li
                      className={
                        "conseil-card" +
                        (index === currentIndex ? "active" : "")
                      }
                      onClick={() => setActiveTutorial(tutorial, index)}
                      key={index}
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        fill="currentColor"
                        className="bi bi-grip-vertical"
                        viewBox="0 0 16 16"
                      >
                        <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
                      </svg>
                      <p>{tutorial.isPack ? "test" : "{tutorial.message}"}</p>
                      <div className="conseil-card-title">
                        Titre : {tutorial.title} - {tutorial.isPack ? "Pack oui" : "Pack non"}
                      </div>
                    </li>
                  ))}
              </ul>

              <button
                className="m-3 btn btn-sm btn-secondary"
                onClick={removeAllTutorials}
              >
                Modifier (Soon)
              </button>
            </div>
            <div className="col-md-12">
              {currentTutorial ? (
                <div>
                  <h4>Conseil</h4>
                  <div>
                    <label>
                      <strong>Titre:</strong>
                    </label>{" "}
                    {currentTutorial.title}
                  </div>
                  <div>
                    <label>
                      <strong>Message:</strong>
                    </label>{" "}
                      //HERE I NEED DISPLAY message or messages
                    {currentTutorial.messages.map((number) => number + 1)}
                  </div>
                  <div></div>

                  <Link
                    to={"/tutorials/" + currentTutorial.id}
                    className="badge badge-warning"
                  >
                    Edit
                  </Link>
                </div>
              ) : (
                <div>
                  <br />
                  <p>Veuillez cliquer sur un conseil...</p>
                </div>
              )}
            </div>
          </Tab>
          <Tab eventKey="favourite" title="Mes conseils favoris (3)">
            test2
          </Tab>
          <Tab eventKey="searched" title="« Rhinite allergique » (17)" disabled>
            test3
          </Tab>
        </Tabs>
      </div>
    </div>
  );
};

export default TutorialsList;

Thanks you for you're helping !