对React搜索栏使用带有嵌套样式的样式组件，尝试将两个不同的SVG放置在搜索栏的相对两侧

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

const SearchBar = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  height: 40px;
  border: 1px solid #ccc;
  padding: 5px;
`;

const LeftSVG = styled.svg`
  width: 20px;
  height: 20px;
  fill: #000;
`;

const RightSVG = styled.svg`
  width: 20px;
  height: 20px;
  fill: #000;
`;

const SearchBar = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  height: 40px;
  border: 1px solid #ccc;
  padding: 5px;
`;

const LeftSVG = styled.svg`
  width: 20px;
  height: 20px;
  fill: #000;
`;

const RightSVG = styled.svg`
  width: 20px;
  height: 20px;
  fill: #000;
`;

const SearchComponent = () => {
  return (
    <SearchBar>
      <LeftSVG>
        {/* 这里放置左侧的SVG内容 */}
      </LeftSVG>
      {/* 这里放置搜索框 */}
      <RightSVG>
        {/* 这里放置右侧的SVG内容 */}
      </RightSVG>
    </SearchBar>
  );
};

export default SearchComponent;