i want to show fake user infomation on screen, so i used faker.js. I made fake users infomation, put it in suggestions state, and give the Story component and then i was tying to show user info on screen using map function, but it couldn't be.

this is my code

import faker from "faker";

import { useEffect, useState } from "react";
import Story from "./Story";

const Stories = () => {
  const [suggestions, setSuggestions] = useState([]);

  useEffect(() => {

    const suggestion = [...Array(20)].map((_, i) => ({
      ...faker.helpers.contextualCard(),
      id: i,
    }));
    setSuggestions(suggestion);
  }, []);

  return (
    <div>
      {suggestions.map((profile) => {
        <Story
          key={profile.id}
          img={profile.avatar}
          username={profile.username}
        />;
      })}
      {/* story */}
      {/* story */}
      {/* story */}
      {/* story */}
      {/* story */}
    </div>
  );
};

export default Stories;

import React from "react";

const Story = ({ img, username }) => {
  return (
    <div>
      hihi
      <img src={img} alt="" />
      <p>{username}</p>
    </div>
  );
};

export default Story;

i checked user info at 'suggestion'. it's no problem.

my english is not good, so thanks for read my question.