mapping an object array incorrectly in React?

I cannot figure out why All of the defitions show on the screen. My goal is to display all 4 buttons(terms), and only show the definition for that term. As it is now it keeps showing all the definitions?? Something about the way I am accessing the Data? There are multiple objects in SlideData array, im just showing one because its the only one with Terms.

const SlideData = [
   {
    index: 7,
    title: "Key Terms (1 of 3)",
    content: [
      {
        type: "terms",
        terms: [
          {
            name: "Business Intelligence",
            definition:
              "definition 1",
          },
          {
            name: "DCPS",
            definition:
              "definition 2",
          },
          {
            name: "Civilian Personnel System:",
            definition:
              "definition 3",
          },
          {
            name: "Defense: ",
            definition: " definition 4",
          },
        ],
      },
    ],
  },
];

export default SlideData;

const TextSlide = (props) => {
  //STATE MANAGEMENT//
  const [clickedTerm, setClickedTerm] = useState(0);
  const [showClicked, setShowClicked] = useState(true);

  //CHANGE STATE//
  const handleClick = (i) => {
    console.log(i);
    setClickedTerm(i);
    setShowClicked(true);
  };

  //paragraph
  function Paragraph({ text }) {
    return <p>{text}</p>;
  }
 
  //TERMS RENDER
  function Terms({ title, terms }) {
    return (
      <>
        {title && <p>{title}</p>}
        {terms.map((item, index) => (
          <div">
            <div">
              {showClicked && (
                <div>
                  <h3>{terms[clickedTerm].name}</h3>
                  <div>{terms[clickedTerm].definition}</div>
                </div>
              )}
            </div>
            <button key={index} onClick={() => handleClick(index)}>
              {item.name}
            </button>
          </div>
        ))}
      </>
    );
  }


  const elements = {
    paragraph: Paragraph,
    terms: Terms,
  };

  return (
    <>
      <div className="slide">
        <div className="standard-grid">
          <span className="slide-title title">{props.title}</span>
          <div className="content">
            {props.content.map((item, i) => {
              const Comp = elements[item.type];
              return <Comp key={i} {...item} />;
            })}
          </div>
        </div>
      </div>
    </>
  );
};


export default TextSlide;