Type is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property

Hi i have try to found out this error solution but not successfully.

I m using this type of error.

Type ‘{ mailData: mailSendProps; }’ is not assignable to type ‘IntrinsicAttributes & { children?: ReactNode; }’.
Property ‘mailData’ does not exist on type ‘IntrinsicAttributes & { children?: ReactNode; }’.

My code is this like

<SocialShare mailData={_mailData} />

const _mailData:mailSendProps = {
    url:_seoData.actualURL ?  _seoData.actualURL : '',
    msid:_seoData.msid ?  _seoData.msid : '',
    articlelink:`${_seoData.actualURL}?frm=mailtofriend&intenttarget=no`,
    syn:_seoData.description ?  _seoData.description : 'Page description',
    pageTitle:_seoData.title ? _seoData.title : 'Title VideoShow ',
    subject:`Economictimes.com: ${_seoData.title}` || ''
  }


export interface mailSendProps {
    url?: string,
    msid?:string,
    articlelink?:string,
    syn?:string,
    pageTitle?:string,
    subject?:string
  }



const SocialShare: NextPage = (props?:any) => {  
  const url = props.mailData.url && props.mailData.url != '' ? props.mailData.url : ''
  const [showUrl, setShowUrl] = useState('no');
  const [showEmbed, setShowEmbed] = useState('no');
  const [showMail, setShowMail] = useState('no');
  
  const showHandlerModule = (val:string)=>{
    let _url = '';
    let _embed = '';
    if(val === 'url'){
      _url = 'yes';
      _embed = 'no'
    }else if(val === 'embed'){
      _url = 'no';
      _embed = 'yes'
    }
    setShowUrl(_url);
    setShowEmbed(_embed)
  }
  const closeHandler = ()=>{
    setShowUrl('no');
    setShowEmbed('no')
  }
  const closeMailHandler = ()=>{
    setShowMail('no')
  }
  return (
    <>      
        <Share />
        <div className={styles.codeMailVideo}>
          <span onClick={()=>{setShowMail('yes')}} className={styles.email} title="Email this video"></span>
          {
            showMail === 'yes' ? <MailSendTemplate mailData={props.mailData} onclickhandler={closeMailHandler} /> : ''
          }
        </div>
        <div className={styles.codeVideo}>
          <span onClick={()=>{showHandlerModule('url')}}>Copy URL</span>
          {
            showUrl === 'yes' ?  <span className={styles.copyUrlSec}>
            <input readOnly type="text" value={url} className={styles.readUrl} />
            <i  className={styles.close} onClick={closeHandler}></i>
          </span> : ''
          }
        </div>
        <div className={styles.codeVideo}>
          <span onClick={()=>{showHandlerModule('embed')}}>Embed</span>
          {
            showEmbed === 'yes' ? <span className={styles.copyUrlSec}>
            <textarea readOnly defaultValue={`<iframe mozallowfullscreen="true" webkitallowfullscreen="true" allowfullscreen="true" width="560" height="420" frameborder="0" defaultValue=${url} src=${url}></iframe>`}>{
              
            }</textarea>
            <i  className={styles.close} onClick={closeHandler}></i>
          </span> : ''
          }
          
        </div>
    </>
  );
};

Can anyone found the solution and give me answer thanks you.

>Solution :

Typescript is strict about typechecking. You need to define the shape of your SocialShare props – i.e what props you will receive in this component, or else TypeScript will flag as "properties do not exist":

Can you try adding another SocialShareProps interface like below?

interface SocialShareProps {
  mailData: mailSendProps;
}

const SocialShare: NextPage<SocialShareProps> = (props) => {
...