How to fetch data using custom hooks in SolidJS? – Html

I’m new to SolidJS and React. I’m trying to make a custom hook that will return whatever response I get from an API, then pass that data to components.

The problem is I get empty arrays when i call the hook in the component.

This is the hook:

import { createEffect, createSignal } from "solid-js";
import axios from "axios";

function useFetch(url){

    const [data,signalData] = createSignal(null)

    createEffect(() =>
    {
        axios.get(url).then((response) => 
            
            {signalData(response.data.data)
                console.log(data())
            }

        ).catch(err =>console.log(err))
    },[url])

    return data();
}
export default useFetch;

and im trying to call it in this component:

function Club_window(){

    
    const data = useFetch('http://localhost:8080/team?team_id=151')
    console.log(data)

    return(

    <div class={main_menu_clubCSS.club_window}>
    <div class={main_menu_clubCSS.img_wrapper}>
        <img class={main_menu_clubCSS.img_blur} src='https://cdn.footystats.org/img/teams/england-liverpool-fc.png'/>
        <div class={main_menu_clubCSS.club_content}>
                <p><span>BIGGER CLUB</span><span>Test</span></p>
        </div>
    </div>
</div>
)}
export default Club_window;

The console.log(data()) in the hook logs the data but when i console.log(data) in the component, its null or empty. What am i doing wrong? Ive tried putting the return data(); in other places in the hook, ive tried just return data; nothing works.. Thanks!