样式化组件中的道具从父级渲染了两次

Question

我调试了原始代码，但找不到原因，所以我创建了新的react应用，它也重现了同样的问题。因此，我在控制台中两次出现“ hi”，是否有任何原因导致这种情况发生？

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

const StyledTest = styled.div`${(props) => props.TestVar ? console.log("hi") : console.log("bye")}`
class App extends React.Component {
  render() {
    return (
     <StyledTest TestVar={true} />
    );
  }
}

export default App;