i have several components and they all re-render when fetchData is changed. data is fetched on the parent component and then passed down to all the children. they all have a conditional render within the return statement like this

        <div id='spell_info'>
            
            {fetchData?.primary_class?.spellcasting?.info?.map((item, i) => {
                return(
                    <div id='spell_info_item' key={i}>
                        <p>
                            <strong>{item.name}</strong>
                        </p>
                        <p>
                            {item.desc}
                        </p>
                    </div>
                )
            })}
       // ...more stuff
        </div>

this works fine. in this component there are no hooks that would trigger a re-render unless the user interact with the elements on the page. however, i have another component that is set up in the same way

import {useState, useEffect} from 'react'

export default function ClassFeatures ({functions}){

    const {fetchData, setFetchData} = functions

    console.log('fetchData features', fetchData)
    console.log(fetchData?.primary_class?.spells)

    return(
        <div>
            {fetchData?.primary_class?.features?.map((feature, i) => 
                <>  
                    <p>
                        {feature.name}
                    </p>
                    {feature?.desc?.map((desc, i) => 
                        <p>
                            {desc}
                        </p>
                    )}
                </>
            )}
        </div>
    )
}

when i change fetchData nothing renders from this component until i interact with an input on another component. all the logs show fetchData has the proper data.

ive tried setting a divs state in a useEffect like this

useEffect(() => {
    setDiv(
        <>
            {fetchData?.primary_class?.features?.map((feature, i) => 
                    <>  
                        <p>
                            {feature.name}
                        </p>
                        {feature?.desc?.map((desc, i) => 
                            <p>
                                {desc}
                            </p>
                        )}
                    </>
                )}
        </>
    )
}, [fetchData])

return(
    <div>
        {div}
    </div>
)

and even added another useEffect that just adds one to a variable to try and trigger the re-render.

useEffect(() => {
    setCount(prevCount => prevCount + 1)
}, [fetchData])

but nothing seems to trigger a re-render properly