مشكلة Cannot destructure property

لدي مشروع صغير لجلب صور من موقع Unsplash، ويظهر لي نفس الخطأ كل مرة، صراحة لا أعرف سبب المشكلة هنا، وهذا هو الكود الذي أستخدمه:

ملف Mainboard.js

import React from 'react';
import styled from 'styled-components';
import Pin from './Pin';
function Mainboard(props) {
let { pins } = props; 
return (
    <Wrapper>
        <Container>
            {pins.map((pin, index) => {
                let {urls} = pin;
              return <Pin key={index} urls={urls}/>
            })}   
        </Container>
    </Wrapper>
  )}
 export default Mainboard;

وملف Pin.js:

import React from 'react';
import styled from 'styled-components';

function Pin(props) {
let { urls } = props;
return (
    <Wrapper>
    <Container>
     <img src={urls?.regular} alt="pin"/>
    </Container>
 </Wrapper>
)}
export default Pin;

في كل مرة يظهر لدي هذا الخطأ

Cannot destructure property 'urls' of 'pin' as it is undefined