Mostrar contenido uno debajo de otro según el valor seleccionado del Dropdwon

[cualquiera]

Estimados tengo esta funcionamiento, al seleccionar un item del dropdown y escoger el valor se muestra la información respectiva del item seleccionado, al seleccionar el siguiente item, se oculta la anterior y se muestra la nueva información. como puedo hacer para que al seleccionar un siguiente item el valor del contenido anterior seleccionado se conserve y no se remplaze por el nuevo seleccionado, es decir que al seccionar un nuevo item se vayan añadiendo uno de bajo del otro, actualmente lo reemplaza. no puedo lograr esa funcionalidad, conservar el contenido seleccionando y que se vayan listando uno debajo del otro y no remplazando. Gracias.

Código Javascript:

/* eslint-disable */
import React, { useState, useEffect } from "react";
import Layout from "../../../common/layout";
import DropdownInput from "../../../common/dropdown-input";
 
const ITEMS_BENEFITS_DROP_DOWN = [
  { id: "0000", descripcion: "Condiciones estándares" },
  { id: "0001", descripcion: "Descuento 11x12" },
  { id: "0002", descripcion: "Descuento 13x12" },
  { id: "0003", descripcion: "Migración Pago por Kilómetros" },
  { id: "0004", descripcion: "SOAT gratis" },
];
 
const BENEFITS_DETAIL = {
  beneficio: "No usa el seguro, lo retomará más adelante",
};
 
const StepThree = ({ setStep }) => {
  const LeftContent = () => (
    <div className="stepTwo leftContent">
      <div className="btn-back" onClick={() => setStep(2)}></div>
      <h2>
        <b>Beneficios</b> a brindar
      </h2>
      <p>Elige el beneficio que deseas brindarle a tu cliente.</p>
      <div className="separator"></div>
      <div className="policieDetail">
        <div className="policieDetail__title">MOTIVO ELEGIDO</div>
        <div className="policieDetail__code">{BENEFITS_DETAIL.beneficio}</div>
      </div>
    </div>
  );
 
 
  const RightContent = () => {
    const [selectedReason, setSelectedReason] = useState('');
    const handleChangeReason = (val) => {
      setSelectedReason(val);
      
    };
 
 
    
 
    return (
      <div className="stepTwo rightContent">
        <div>
          <h2>Elige el beneficio</h2>
          <div className="benefit-reason">
            <p>
              Los beneficios van de acuerdo al <span>motivo elegido.</span>
            </p>
          </div>
        </div>
        <DropdownInput
          items={ITEMS_BENEFITS_DROP_DOWN}
          onDropdownSelectItem={handleChangeReason}
          // loading = {false}
          label="Beneficios a brindar"
          name="beneficios"
        />
 
        {selectedReason && selectedReason.descripcion === "Descuento 11x12" && (
          <div className="benefits-detail">
            <div className="box-benefits-detail">
              <div className="benefits_header">
                <div className="benefitsLabel">
                  <div className="benefitsLabel blue">beneficio</div>
                </div>
                <div className="benefitsRemove">
                  <span className="textRemove">eliminar</span>
                  <button
                    onClick={() => {
                      setSelectedReason();
                    }}
                    className="buttonRemove"
                  ></button>
                </div>
              </div>
              <div className="benefits_body">
                <div className="benefits_title">Condiciones estándares</div>
                <p>
                  A las pólizas financiadas en 12 meses se les modifica a 11 y a
                  la prima anual se le brinda un descuento del 8.3% para no
                  modificar el monto mensual.
                </p>
                <div className="benefitsPrima_actual">
                  <div className="benefitsPrima_actual__tilte">
                    Prima total actual:
                  </div>
                  <div className="benefitsPrima_actual__amount">$486</div>
                </div>
                <div className="benefitsPrima_total">
                  <div className="benefitsPrima_total__title">
                    Prima total con el beneficio aplicado:
                  </div>
                  <div className="benefitsPrima_total__amount">
                    $286 <span>(-8.3%)</span>
                  </div>
                </div>
                <div className="divider"></div>
                <div className="benefitsList">
                  <ul>
                    <li>
                      Sólo aplica para clientes sin pagos pendientes o que
                      tengan solo 1 cuota pendiente.
                    </li>
                    <li>Refinanciamiento de pago al mes siguiente.</li>
                    <li>Vehículos con máximo 1 siniestro.</li>
                    <li>Es compatible con el Descuento 13x12.</li>
                    <li>No aplica con migraciones.</li>
                    <li>Válido para Lima y provincias.</li>
                  </ul>
                </div>
              </div>
            </div>
            <div className="benefitsGuion">
              <div className="benefitsGuion_img"></div>
              <div className="benefitsGuion_content">
                <div className="benefitsGuion_content__title">
                  GUIÓN SUGERIDO
                </div>
                <p>
                  "Estimado(a) [nombre del cliente], entiendo las dificultades
                  que podría tener para realizar el pago debido a la coyuntura
                  que estamos viviendo, por...{" "}
                </p>
              </div>
              <div className="BenefitsReadMore">
                <button onClick={() => console.log("carga modal...")}>
                  leer más
                </button>
              </div>
            </div>
          </div>
        )}
 
        {selectedReason && selectedReason.descripcion === "SOAT gratis" && (
          <div className="benefits-detail">
            <div className="box-benefits-detail">
              <div className="benefits_header">
                <div className="benefitsLabel">
                  <div className="benefitsLabel purple">regalo</div>
                </div>
                <div className="benefitsRemove">
                  <span className="textRemove">eliminar</span>
                  <button
                    onClick={() => {
                      setSelectedReason();
                    }}
                    className="buttonRemove"
                  ></button>
                </div>
              </div>
              <div className="benefits_body">
                <div className="benefits_title">SOAT gratis</div>
 
                <div className="benefitsList">
                  <ul>
                    <li>Será entregado en formato digital.</li>
                    <li>Sólo aplica para vehículos particulares de Lima.</li>
                    <li>
                      La entrega también aplica a familiares cercanos como
                      padres, hermanos, hijos y cónyuges.
                    </li>
                    <li>Revisar cartilla de vehículos restringidos</li>
                  </ul>
                </div>
              </div>
            </div>
            <div className="benefitsGuion">
              <div className="benefitsGuion_img"></div>
              <div className="benefitsGuion_content">
                <div className="benefitsGuion_content__title">
                  GUIÓN SUGERIDO
                </div>
                <p>
                  “Estimado(a) [nombre del cliente], le comento que también por
                  seguir siendo parte de la familia Rimac,{" "}
                  <span>le puedo ofrecer el SOAT gratis...</span>
                </p>
              </div>
              <div className="BenefitsReadMore">
                <button onClick={() => console.log("carga modal...")}>
                  leer más
                </button>
              </div>
            </div>
          </div>
        )}
 
        <button
          onClick={() => console.log("faltan mas vistas")}
          className={`btn-brokers ${
            selectedReason ? "" : "disabled"
          } pull-right`}
        >
          CONTINUAR
        </button>
      </div>
    );
  };
  return (
    <Layout leftContent={<LeftContent />} rightContent={<RightContent />} />
  );
};
 
export default StepThree;