Hello can someone answers me the website looks like:

Fetching from sql: (works) (returns users)

  -> upper import Cell from '../../components/page/home/cell'

  useEffect(() => {
    fetch('/api/users')
      .then((res) => res.json())
      .then((user) => {
        console.log(user.users.length);
        setUsers(user.users)

      })
  }, [])

Using fetching (sending debuging like console.log):

{
              users.map((member, index) => {
                return (
                  <div key={index + 123}>
                    <Cell style={style} member={member} index={index} key={index}/>
                  </div>
                )
              })
            }

2 codes that same class!

Other class (Cell.js):

function Cell(style, member, index) {
    console.log(index);
  return (
    <>
        <div className={style.cell} key={index + 10}>
            <div className={style.cell_Image} key={index + 11}>
                <Image src={`https://minotar.net/cube/${member.nick}/48.png`} width={48} height={53} alt={"head_of_" + member.nick}/>
            </div>
            <div className={style.cell_top} key={index + 12}>
                <p><span className={style.cellTop}>{index + 1}</span> <span className="nickname">{member.nick}</span> <span className={style.rank}> {member.points}</span></p>
            </div>
        </div>
    </>
  )
}

export default Cell

console.log(sending undefined)