I am trying to set meta tag for my nextjs project and using next-seo package.

Currently I have next-seo config file like below, but not sure how to switch OGP image when Twitter or normal website. I am using two OGP images in .gif and .png format, and want to use .gif as general OGP then twitter and facebook for .png asset.

// eslint-disable-next-line import/no-anonymous-default-export
export default {
    title: '',
    description:'',
    canonical: 'url',
    openGraph: {
        type: 'website',
        url: 'url',
        locale: 'en_US',
        site_name: '',
        title: '',
        description:'',
        defaultImageWidth: 1200,
        defaultImageHeight: 630,
        images: [
            {
                url: './ogp-1.gif',
                width: 1200,
                height: 630,
                alt: 'GIF OGP'
            }
            // Want to use this png image for twitter OGP
            // {
            //  url: '/ogp-2.png',
            //  width: 1200,
            //  height: 630,
            //  alt: 'PNG OGP'
            // }
        ],
        twitter: {
            handle: '@handle',
            site: 'url',
            cardType: 'summary'
        }
    }
}

According to the package documentation, I just have to set OGP image in oepnGraph section. I would like to know how to create a logic if current OGP should be .png or .gif depends on the user using the site URL in normal site (ex. Slack, Messenger, Website) or SNS (ex. Facebook or Twitter).