Javascript – Objects are not valid as a React child (found: object with keys {}). But prop value is not an object

For some reason Error appears even though i am trying to send a text or a number via props
Objects are not valid as a React child (found: object with keys {}).
It seems really strange because it shows that somewhere it found an empty obj
Here’s my components, please help me guys

Content.js

import OperatorCard from "./OperatorCard";
import {useState} from 'react';
import {useEffect} from 'react';
import '../App.css'
import Opercard from "./Opercard";
function Content() {
    const [arr, setArr] = useState(0);
    const [isLoaded, setIsLoaded] = useState(0);
    useEffect(() => {
        fetch('https://fakestoreapi.com/products')
            .then(response => response.json())
            .then(data => setArr(data));
    }, []);
     

if(arr != 0)
{

    return ( 
    <div className='content'>

        {
            //<OperatorCard ldap={item.info.LDAP_LOGIN} ldapName={item.info.LDAP_NAME}/>
            arr.map(function(item, i){
                console.log('test');
                return <OperatorCard ldap={item.image} ldapName={item.title}/>
            })
        }
  
    </div> 
    
  );
        
}
return (
    <div className='content'></div>
)
}

export default Content;

OperatorCard.js

function OperatorCard(ldap = 'DN270204ABV', ldapName = 'Акулов Богдан Вячеславович') {
    const link = ldap;

return ( 
        <div className='testCard'>
          <div className='basicInfoWrap'>
            <div className='basicInfo'>
              <div className='operatorPhoto'><img alt='here must be an image' src={link}/></div>
            </div>
            <div className='nameWrap'>
            <div className='opername'>{ldapName}</div>
            <div className='dur'><p>Длительность смены:</p> <p className='hours'>12ч</p> </div>
            <div className='rait'><p>Рейтинг:</p> <p className='rateValue'>Кращі</p></div>
            </div>
          </div>
          <div className='btnBar'>
            <button className='btnFull'>Повна інформація</button>
          </div>
        </div>
     );
}

export default OperatorCard;

App.js

import logo from './logo.svg';
import './App.css';
import OperatorCard from './modules/OperatorCard';
import Content from './modules/Content';

function App() {
  return (
    <div className="App">
      <div className='header'>
        <img src='https://cdn.liqpay.ua/userfiles/c/i14778026796/2024-01-19/l34aENMzcpJhKMtWtXwS/0gzLEbPZVk.png'/>
        <h3>КЦ Телемаркетингу</h3>
      </div>
      <Content/>
      
    </div>
  );
}

export default App;

I tried everything that i was able to found so far.