Trouble checking if props is undefined

So I have a page in my project that has a get and then it passes the response to a const, as below.

const [reference, setReference] = useState([])   useEffect(() => {            api.get(`/${props.route.params.index}`).then( response => {                setReference(response.data)                setLegendaryAction(response.data.legendary_actions)            }).catch( error =>                 console.log(error)             )        }, [])

Then I pass diferent parts of the reference to multiple instances of the same component.As the following example, there is reference.action and reference.reaction. I will always have an action, but sometimes Reaction will be undefined, so I'm cheking if it's true before I render my component.

<ReferenceDetails                     detailTitle="Actions"                     details={reference.actions}                />                {reference.reactions && <ReferenceDetails                          detailTitle="Reactions"                          details={reference.reactions}                    />                }

But it gives me this error:

Error: Text strings must be rendered within a component.

But when I do console.log(reference.reactions) it returns undefined.Could someone shed some light here please?