Im trying to render a component that returns the description of an item from an api. In this instance i'm returning spells from the DnD API, and trying to access the url for each one to display their descriptions.So far i have the endpoints for the dropdown menus working correctly. Im trying to format whats being returned into another endpoint to use with my description component.I have a state called "selectedSpell" that tracts what used in the dropdown. right now i'm only getting an object that i cant figure how to turn into the string i want. I hope im making sense with what i want to do 😓

heres what i have working.

import {useState , useEffect} from 'react'
import axios from 'axios';

export default function Description (props){
const { selectedSpell } = props
console.log(props)

const [description, setDescription] = useState([]);
    const fetchDesc = async () => {
      try {
        const DESC_URL = "{https://www.dnd5eapi.co/{props.selectedSpell}";
        const response = await axios.get(DESC_URL);
        console.log("response", response.data.results);
          setDescription(response.data.results);
          console.log(description)
      } catch (error) {
        console.log(error);
      }
    };
    useEffect(() => {
      fetchDesc();
    }, []);
    return(
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Consectetur nunc, morbi enim, rhoncus lacus duis. 
                Tortor amet pulvinar dolor fringilla sit elit ac ut. 
            </p>
        </div>

    )

}

im new here and cant post images yet lol

https://i.stack.imgur.com/iqi9Y.png

Im trying to get that description module to return an api call based off what "spell" is chosen