I tried this way but no data is showing up and while compiling ,I'm not getting any error.I'm New to React , thanks in Advance

const Students = (props) => {
  let id = props.students;
  const [studentsData, setStudentsData] = useState(null);
  const url = "http://localhost:2021/students-data/" + id;
  console.log(url);

  useEffect(() => {
    axios.get(url).then((res) => {
      setStudentsData(res.data);
    });
  }, [url]);

  if (!studentsData) {
    return <Spin />;
  }

  //   console.log(studentsData)

  return (
    <List
      dataSource={studentsData}
      renderItem={(item) => {
        <List.Item key={item._id}>
          <Collapse style={{ minWidth: "257px" }}>
            <Panel header={item.name}>
              <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
                <Col className="gutter-row index" span={8}>
                  <div>Year Of Batch</div>
                </Col>
                <Col className="gutter-row value" span={16}>
                  <div>{item.yearOfBatch}</div>
                </Col>
              </Row>
              <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
                <Col className="gutter-row index" span={8}>
                  <div>Skills</div>
                </Col>
                <Col className="gutter-row value" span={16}>
                  <div>
                    {item.skills.map((e) => {
                      return e + " , ";
                    })}
                  </div>
                </Col>
              </Row>
            </Panel>
          </Collapse>
        </List.Item>;
      }}
    />
  );
};

export default Students;

why data is not rendering when I assigned collapse to renderItem attribute ? what is the main issue here ? and how to modify current code to work properly