hola a todos Traté de hacer una entrada para poner algunos elementos (URL) en mi matriz (referencias), funciona, pero la parte del mapa no muestra nada. porque pasa eso?

Quiero decir, cuando pongo una URL en la entrada , veo que la matriz (referencias) tenía longitud en la herramienta de desarrollo => consola, pero no puedo mostrar los elementos de la matriz con el método map() y no sé cuál es el problema...

 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> </> ); }