New component for every column in Supabase database React

I have a Supabase database called threads with 5 entries, I am trying to make a new React component for every column in the database but I am running into some issues.

The issue that it’s giving me is that it’s stopping the program to prevent an infinite loop, I’d assume this is because in my code I am updating my useState every time I render my Component which I am aware of, but I’m not sure how I would get around this problem.

Component.js:

import {useState} from "react";
import {supabase} from "../../utils/supabaseClient";

export default function Sidebar() {
    const [newThreads, setNewThreads] = useState([]);

    // this is where I am kinda stuck
    const threadList = [];
    (async () => {
        let {data: threads, error} = await supabase
            .from('threads')
            .select('thread_title');
        threadList.push(threads); // how do I get the current index of the loop (and limit it to only get 5 entries?)
        threadList.forEach(function (value) {
            console.log(value)
        })
    })();
    setNewThreads(threadList);

    return (
        <div className="sidebar">
            <div className="sidebar-widget">
                <span className="widget-title">New Threads</span>
            </div>
            <div className="sidebar-widget">
                <span className="widget-title">New Members</span>
                {(Object.entries(newThreads) || []).map(([key, value]) => {
                    return (
                        <div className="widget-cell">
                            <div className={"widget-cell-image"}/>
                            <div className="widget-cell-content">
                                <span className={"widget-cell-title"}>{value}</span>
                                <div className="widget-cell-values">
                                    <span className={"widget-cell-by-user"}>by harley_swift,</span>
                                    <span className={"widget-cell-time"}>22:02</span>
                                </div>
                            </div>
                        </div>
                    );
                })}

            </div>
        </div>
    )
}

Any help with an explanation would be greatly appreciated!