Mapping over data with dynamic images

So I have the following react component

import React from "react";
import ReactDOM from "react-dom";

/// Get out static assets
import logo1 from '../images/scaffold/logo1.svg';
import logo2 from '../images/scaffold/logo2.svg';
import logo3 from '../images/scaffold/logo3.svg';
import logo4 from '../images/scaffold/logo4.svg';
import logo5 from '../images/scaffold/logo5.svg';
import logo6 from '../images/scaffold/logo6.svg';
import logo7 from '../images/scaffold/logo7.svg';

const Links = (props) => {
  return (
    <div>
    {Object.keys(props.link).map(i => (
      <a key={i} href={props.link[i]}
      target="_blank">
      <div className="release-action">
      <div className="release-distro-logo">
      <img src={logo1}/>
      </div>
      <span>Action1</span>
      </div>
      </a>
    ))}
    </div>
  )
}

export default Links;

I would like to change the logo and the action text based on the data that comes in from props. Is it possible to use the key of the value pair in an if statement to do this? So for example, if the key was link2 then logo2 would be used and the span would change to Action2 basically the logos would visually present the link and the link URL would be used in the link src.

"links": {
    "link1": "https://www.google.com",
    "link2": "https://www.yahoo.com",
    "link3": "https://www.facebook.com",
    "link4": "https://www.twitter.com",
    "link5": "https://www.instagram.com",
    "link6": "https://www.gmail.com"
  }