i am trying to pass an object(i am fetching it form an api) as prop to a child component but when i console it inside the component it is not printing

Question

I am trying to pass the array of object i am receiving from the api, i am using state to store the response from api then using map function to iterate through array and pass the object one by one but when i console it inside the Formss component i dont get any result.

App Component :

const App = () => {
  const [obj, setObj] = useState(null);
  const url = "http://localhost:8000/api/data";

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const data = await response.json();

      if (response.ok) {
        setObj(data);
      }
    };
    fetchData();
  }, []);

  return (
    <>
      <h1>App!!</h1>
      {obj &&
        obj.map((element) => {
          // console.log(element);
          <Formss item={element} />;
        })}
      <ClickButton text={"Click Here !!"} />
    </>
  );
};

Formss Component:

const Formss = ({item}) => {
  console.log(item);
  return (
    <>
      <p>{item.id}</p>
    </>
  );
};

export default Formss;

i am trying to print id of objects that are part of the array object.