Framer Web Custom Component with Fetch

import { useState, useEffect } from "react"

export default function Steps(props) {
    const [steps, setSteps] = useState(0)

    async function update() {
        const response = await fetch(
            "https://XxXxXxX.supabase.co/rest/v1/steps",
            {
                method: "GET",
                headers: {
                    apikey: "XXXXX",
                },
            }
        )
        const data = await response.json()
        setSteps(data[0].count)
    }

    useEffect(() => {
        update()
    }, [])

    return (
        <>
            {steps ? (
                <div>
                    <span>{steps} </span>
                    <span>steps today</span>
                </div>
            ) : (
                "Loading..."
            )}
        </>
    )
}