Вставить изображение в импортированный компонент React (РЕШЕНО!)

Question

(РЕШЕНО, см. Ответ ниже)

Я хочу добавить изображение внутри каждого раздела аккордеона, и я попытался использовать <img src={Image}/>. Если этот фрагмент кода размещен, как на скриншоте, он работает, но находится за пределами <Accordion> .

Если я перенесу код внутрь <Accordion>, он перестанет работать, и я не могу точно понять, как это исправить. Была мысль как-то использовать изображение вроде {props.title} и {props.content} но не смог заставить его работать.

Какие-либо предложения?

код в компоненте &lt;strong&gt;FirstAccordion.js&lt;/strong&gt;

Accordion.js // компонент с логикой аккордеона

      return (
        <div className="accordion-section">
            <button className={`accordion-button ${setActive}`} onClick={toggleAccordion}>
                <p className="accordion-title">{props.title}</p>
                    <Chevron
                        className={`${setRotate}`}
                        width={10}
                        fill={"#777"}
                    />
            </button>
        
            <div 
                ref={content}
                className="accordion-content"
                style={{ maxHeight: `${setHeight}` }}>
            
            <div
                className="accordion-text"
                // the prop dangerouslySetInnerHTML makes it possible to use HTML within a string
                dangerouslySetInnerHTML={{ __html: props.content }}  
                />

            </div>
        </div>

FirstAccordion.js // компонент, в который я импортирую логику аккордеона

      export function FirstAccordion() {
    
    return (
        <>
        <Sidebar />
        <Navbar />
        <h1 className="h1-accordion">Pregnancy Week By Week</h1>
        <section className="accordion-background">
        <div className="accordion-wrapper">
        <div className="accordion-container-cne">
            <Accordion
            title="Week 1"
            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>

Answer 1

Измените это:

      <div
  className="accordion-text"
  dangerouslySetInnerHTML={{ __html: props.content }}
/>

Тоже:

      <div className="accordion-text">{props.children}</div>

После этого вы сможете использовать аккордеон следующим образом:

      <Accordion title="Week 1">
  <p>Hello World</p>
  <img src={...} />
</Accordion>

Вероятно, вам придется приспособиться к своим потребностям.