Objects are not valid as a React child (found: object with keys {name,age, img})

Uncaught Error: Objects are not valid as a React child (found: an object with keys {name, age, img}). If you meant to render a collection of children, use an array instead..

How to resolve this error

data.js

export const student = [
    {
      id: 1,
      img:
        "https://i.picsum.photos/id/1025/200/300.jpg?hmac=IOMIDjfOXbZ-vD59diaXLcQcq5g6Xo3Zg_gRF9UmwL0",
      name: "john",
      age: 30,
      link: "/john",
    },
    {
      id: 2,
      img:
        "https://i.picsum.photos/id/945/200/200.jpg?hmac=_7D53GpdtYZnR2d9KUdpkiRzfoDmIumI1MP65WM2l-w",
      name: "doe",
      age:23,
      link: "/doe",
    },
  ];

student.js

import { student } from "./data.js";
import { find } from "./action.js";

export class Student extends Component {
  render() {
    const { find } = this.props;
    return (
      <div>
        {student.map((item, index) => {
          return (
            <div key={index}>
              <img src={item.img} aly={item.name} />
              <h2>{item.name}</h2>
              <h2>{item.age}</h2>
              <Link to={item.link}>
                <button onClick={() => find(item)}>Find</button>
              </Link>
            </div>
          );
        })}
      </div>
    );
  }
}

export default connect(null, { find })(Student);

       

action.js

export const find = (item) => (dispatch) => {
    const { name, age, img } = item;
    const element = { student_name: name, student_age: age, student_img: img };
    dispatch({
      type: actionTypes.SELECTED_VALUE,
      payload: element,
    });
  };