Javascript react组件中的Css动画继承了同一动画中不同动画的背景色

我在react中生成了一个组件，它的工作原理类似于谷歌日历中的“卡片”和其他额外功能，带有会议名称、时间、受邀者等。这张卡片有一个热点，可以是两种不同的颜色和动画，从中心逐渐向外扩展。我正在通过道具传递颜色（包括css中的关键帧），但由于某种原因，当两种热点颜色在同一容器中同时存在时，其中一种会从另一种颜色继承颜色，如下所示：

这是我的热点组件：

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { MainContainer } from './styles';

function HotSpot({ color }) {
return (
    <MainContainer color={color}>
        <div className="item">
            <div className="item-inner">
                <a href="#" className="sonar" />
            </div>
        </div>
    </MainContainer>
);
}

   HotSpot.propTypes = {
   color: PropTypes.string,
   };

   export default memo(HotSpot);

如果我从红色的那一个检查class.sonar，动画的颜色是绿色的，如下所示：

/* eslint-disable eqeqeq */
import styled from 'styled-components';

export const MainContainer = styled.div`
margin-left: 12px;
/*------------------------------------------------*\
Mixins
\*------------------------------------------------*/
/*------------------------------------------------*\
Sonar
\*------------------------------------------------*/
   @-webkit-keyframes sonar {
   from {
  box-shadow: 0 0 0 0
         ${props => props.color},
    0 0 4px 2px rgba(0, 0, 0, 0.25);
}
to {
  box-shadow: 0 0 0 10px rgba(255, 147, 223, 0),
    0 0 4px 2px rgba(0, 0, 0, 0.25);
}
}
  @keyframes sonar {
    from {
       box-shadow: 0 0 0 0
       ${props => props.color},
       0 0 4px 2px rgba(0, 0, 0, 0.25);
   }
   to {
    box-shadow: 0 0 0 10px rgba(255, 147, 223, 0),
     0 0 4px 2px rgba(0, 0, 0, 0.25);
  }
 }
 .sonar {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: ${props => props.color};
  border: ${props => props.color};
  border: 2px solid ${props => props.color};
  -webkit-animation: sonar 800ms ease-out infinite;
  animation: sonar 800ms ease-out infinite;
}

/*------------------------------------------------*\
Uninteresting stuff
\*------------------------------------------------*/
*,
*:before,
*:after {
  box-sizing: border-box;
 }

.wrapper {
width: 850px;
margin: 20px auto;
}
.item-inner {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
.item-inner > a {
 text-decoration: none;
 display: inline-block;
 }
 `;