Get only the first element of a map

Question

I have the following code, which the purpose it is to be reused inside another component, and give a different link according to the id of my object, and my API return.

The problem is that, how I'm using a map function it is reproducing the same button multiple times on the screen. I want to know how I get only one button. Can I somehow use indexOf inside that map? Everything else is working just fine

    const ButtonGroup = (linksReturn) => {
      return linksReturn.map((urlAdress, index) => (
        <div key={index}>
            <button
              target="_blank"
              href={urlAdress["detailsUrl"]}
            >
              Acess Link
            </button>
          </div>
      ));
    };
    const PreviewActions = ({ linksReturn }) => {
      return <div>{ButtonGroup(linksReturn)}</div>;
    };
    export default PreviewActions;

This is the part of the code where I reuse the button

    import { useEffect } from 'react';
    import { useParams } from 'react-router-dom';
    import PreviewActions from './PreviewActions';

    // ** Store & Actions
    import { getInfo } from '../store/actions/index';
    import { useDispatch, useSelector } from 'react-redux';


    const LicitacaoPreview = () => {
      const dispatch = useDispatch();
      const store = useSelector((state) => state.allInfo);

      const { id } = useParams();
      
      useEffect(() => {
        dispatch(getInfo(id));
      }, [dispatch]);

      return typeof store.lotesData === 'object' ? (
        <div>
              <PreviewActions
                id={id}
                linksReturn={store.infoData}
              />
        </div>
      ) 
    };

    export default LicitacaoPreview;