I have written a component

import { useState, useEffect } from "react";
import styled from "styled-components";
import { useParams } from "react-router-dom";
import colors from "../../utils/styles/colors";
import { ThemeContext } from "../../utils/contexte";



function Profile() {
   const { id: queryId } = useParams();
   const [profileData, setProfileData] = useState({});
   useEffect(() => {
      fetch(`http://localhost:8000/freelance?id=${queryId}`)
         .then((response) => response.json())
         .then((jsonResponse) => {
            setProfileData(jsonResponse?.freelaneData);
         });
   }, [queryId]);

   const { picture, name, location, tjm, job, skills, available, id } =
      profileData;

I am using this route in my index.js:

<Route path="/profile/:id" render={(props) => <Profile {...props} />}

But, the warning I am getting is:

index.tsx:25 Matched leaf route at location "/profile/1" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.