Best way to change image and description onClick with react hooks

I have a list of services, being displayed beside the list is a picture and a description, basically when I click the list item I want the picture to change to the corresponding image/description. Right now I have the image changing onClick with hooks which is great but I’m not sure the best way to also change the descriptions. Should I make an object for each services which include the image src and then also the text? How would I go about doing that with react hooks? What would the onClick/object look like?

import React, { useState, useEffect } from "react"
import styles from "./Services.module.css"
import FadeInSection from "../FadeInSection/FadeInSection"
import { SRLWrapper } from "simple-react-lightbox"
import kitchen from "../../images/GalleryImages/image1.jpg"
import bathroom from "../../images/GalleryImages/image2.jpg"
import flooring from "../../images/GalleryImages/image4.jpg"
import painting from "../../images/GalleryImages/image5.jpg"
import cabinets from "../../images/GalleryImages/image6.jpg"
import backsplash from "../../images/GalleryImages/image7.jpg"
import basement from "../../images/GalleryImages/image8.jpg"

const Services = () => {
  const [selectedInterior, setSelectedInterior] = useState(kitchen)
  const [selectedExterior, setSelectedExterior] = useState(bathroom)

  return (
    <div className={styles.container} id="services-page">
      <div className={styles.content}>
        <FadeInSection>
          <div className={styles.description}>
            <h1 className="bigTitle">What we have to offer</h1>
            <h2 className="smallTitle">
              We offer a variety of services for both the interior and exterior
              of your home
            </h2>
            <div className="line"></div>
          </div>
          <SRLWrapper>
            <section className={styles.servicesSection}>
              <div className={styles.servicesContainer}>
                <div className={styles.servicesContent}>
                  <h1 className={styles.servicesTitle}>Interior Services</h1>
                  <ul className={styles.renovationList}>
                    <li onClick={() => setSelectedInterior(bathroom)}>
                      Bathrooms
                    </li>
                    <li onClick={() => setSelectedInterior(basement)}>
                      Basements
                    </li>
                    <li onClick={() => setSelectedInterior(kitchen)}>
                      Kitchens
                    </li>
                    <li onClick={() => setSelectedInterior(cabinets)}>
                      Cabinet Installation
                    </li>
                    <li onClick={() => setSelectedInterior(painting)}>
                      Painting
                    </li>
                    <li onClick={() => setSelectedInterior(backsplash)}>
                      Backsplash
                    </li>
                    <li onClick={() => setSelectedInterior(flooring)}>
                      Flooring
                    </li>
                  </ul>
                </div>
              </div>
              <div className={styles.service}>
                <div className={styles.imageContainer}>
                  <img
                    src={selectedInterior}
                    className={styles.interiorImage}
                  />
                </div>
                <p className={styles.serviceDescription}>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
                  perferendis quibusdam ipsa fuga qui, velit non voluptatem,
                  quod, illum tempore consequuntur! Fuga fugiat odit quisquam
                  officia consequuntur, sapiente voluptatibus maxime!
                </p>
              </div>
            </section>
            <section className={styles.servicesSection}>
              <div className={styles.servicesContainer}>
                <div className={styles.servicesContent}>
                  <h1 className={styles.servicesTitle}>Exterior Services</h1>
                  <ul className={styles.renovationList}>
                    <li onClick={() => setSelectedExterior(kitchen)}>
                    Fences
                    </li>
                    <li onClick={() => setSelectedExterior(bathroom)}>
                     Decks
                    </li>
                    <li onClick={() => setSelectedExterior(flooring)}>
                      Patios
                    </li>
                    <li onClick={() => setSelectedExterior(kitchen)}>
                      Porches
                    </li>
                    <li onClick={() => setSelectedExterior(bathroom)}>
                      Siding
                    </li>
                  </ul>
                </div>
              </div>
              <div className={styles.service}>
              <div className={styles.imageContainer}>
                <img src={selectedExterior} className={styles.exteriorImage} />
              </div>
                <p className={styles.serviceDescription}>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
                  perferendis quibusdam ipsa fuga qui, velit non voluptatem,
                  quod, illum tempore consequuntur! Fuga fugiat odit quisquam
                  officia consequuntur, sapiente voluptatibus maxime!
                </p>
             </div>
            </section>
          </SRLWrapper>
        </FadeInSection>
      </div>
    </div>
  )
}

export default Services