map() method dosent show items of the array ES6

Question

hi everyone I tried to make an input to put some items(URL) in my array(references), its work but the part of the map doesn't show anything. why that's happen?

I mean when I put some URL in the input I see that the array (references) had length in the dev tool => console but I cant show the array items with map() method and idk whats the problem ...

import { useState } from "react";

export default function ArticlesReferences() {
  const [references, setReferences] = useState([]);
  const [links, setLinks] = useState("");

  const addReference = (links) => {
    setReferences([...references, {links}]);
  };
  const removeReference = (links) => {
    setReferences(references.filter((reference) => reference.links !== links));
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    addReference(links);
    setLinks("");
  };
  return (
    <>
      <div>
        <ul>
          {references.map((reference) => {
            <li styles={{ fontSize: "2rem" }} key={reference.links}>
              <span> {reference.links}</span>
              <span onClick={() => removeReference(reference.links)}>X</span>
            </li>;
          })}
        </ul>
      </div>
      <form onSubmit={handleSubmit}>
        <input
          type="url"
          placeholder="enter your url"
          value={links}
          onChange={(e) => setLinks(e.target.value)}
        />
        <input type="submit" value="enter" />
      </form>
    </>
  );
}