No puedo obtener los datos de la API para mostrarlos en la pantalla cuando intento recuperarlos me sale un error 400 No sé cómo recuperar los datos puse las rutas correctas y hasta ahora nada funciona.

 import Card from "../../components/Card"; import styled from "styled-components"; import { Loader } from "../../utils/styles/Atoms"; import { useFetch, useTheme } from "../../utils/hooks"; import freelancers from "../Freelances"; const CardsContainer = styled.div` display: grid; gap: 24px; grid-template-rows: 350px 350px; grid-template-columns: repeat(2, 1fr); align-items: center; justify-items: center; `; const LoaderWrapper = styled.div` display: flex; justify-content: center; `; export function getFreelance(id) { const freelance = []; console.log(freelance); return freelance.find((freelancer) => freelancer.id === id); } function Freelance() { const { theme } = useTheme(); const freelanceData = getFreelance(); const { data, isLoading, error } = useFetch( `http://localhost:8000/profile/?id=${freelanceData}` ); console.log(data); const freelanceProfil = data?.freelanceProfil; if (error) { return <span>Oups il ya eu un problème</span>; } return ( <div> {isLoading ? ( <LoaderWrapper> <Loader theme={theme} data-testid="loader" /> </LoaderWrapper> ) : ( <CardsContainer> {getFreelance((profile, index) => ( <Card key={`${profile.name}-${index}`} label={profile.job} title={profile.name} picture={profile.picture} /> ))} </CardsContainer> )} </div> ); } export default Freelance; /*The different routes to make API calls*/ /* Node Js API ul li /freelances li /profile/?id={id} li /survey li /results/?a1={answer1}&a2={answer2}&a3={answer3}... */ /*The model to get the unique user using his Id*/ const freelancesData = require("../models/freelances"); function getFreelance(id) { return freelancesData.find((freelancer) => freelancer.id === id); } module.exports = getFreelance;