如何使用css-in-js在悬停另一个元素时显示div元素？

import React, { useState } from 'react';
import styled from 'styled-components';

const Container = styled.div`
  position: relative;
`;

const HoverableElement = styled.div`
  /* 其他样式 */
`;

const HiddenDiv = styled.div`
  position: absolute;
  top: 100%;
  left: 0;
  display: ${({ show }) => (show ? 'block' : 'none')};
  /* 其他样式 */
`;

const MyComponent = () => {
  const [showDiv, setShowDiv] = useState(false);

  return (
    <Container>
      <HoverableElement onMouseEnter={() => setShowDiv(true)} onMouseLeave={() => setShowDiv(false)}>
        Hover me
      </HoverableElement>
      <HiddenDiv show={showDiv}>
        This div will be shown when hovering the other element.
      </HiddenDiv>
    </Container>
  );
};

export default MyComponent;