How do I destructure a promise returned by axios?

Below is the code to fetch some data

    useEffect(async (id) => {
//    const data = await redditFetch(id);
async function redditFetch(id){
    try {
        const {data:{data}} = await axios.get(`https://www.reddit.com/search.json?q=${id}&limit=50`);
        const {children} = data;
        return children.map(data=> data.data);
    } catch (error) {
        console.log(error);
    }
}
const data = redditFetch(id);
setData(data)
},[setData])

console.log(Data);

And this is the promise returned:

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(50)

What I want is the Array inside the PromiseResult.

I've also tried another away using async await like this which returns a proper array.

const PostPage = () => {
    const {id} = useParams();
    const [Data, setData] = useState([])
    
    useEffect(async (id) => {
    //    const data = await redditFetch(id);
    async function redditFetch(id){
        try {
            const {data:{data}} = await axios.get(`https://www.reddit.com/search.json?q=${id}&limit=50`);
            const {children} = data;
            return children.map(data=> data.data);
        } catch (error) {
            console.log(error);
        }
    }
    const data = await redditFetch(id);
    setData(data)
    },[setData])

    console.log(Data);

But with this comes a bloody warning that I can't get rid of:

index.js:1 Warning: An effect function must not return anything besides a function, which is used for clean-up.

It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:

useEffect(() => { async function fetchData() { // You can await here const response = await MyAPI.getData(someId); // ... } fetchData(); }, [someId]); // Or [] if effect doesn't need props or state

So, my dear coders, tell me what to do???