Estoy construyendo una biblioteca de componentes React. Ahora, quiero agregar estilos a los componentes. Esto funciona bien, pero quiero cambiar el color de fondo si se mueve el mouse. ¿Cómo puedo hacer esto?

 import React from "react" export interface IButtonProps { children: React.ReactNode; bg?: string; color?: string; style?: React.CSSProperties; onClick?: () => void; } export const Button: React.FC<IButtonProps> = props => { const {children, bg, color, style} = props; let _style: React.CSSProperties = style || { backgroundColor: "#12a4d9", color: "#fff", border: "none", padding: "10px 20px", borderRadius: "5px", cursor: "pointer", fontSize: "15px", fontWeight: 500, outline: "none", transition: "all 0.2s ease-in-out", boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)", }; if (bg) _style.backgroundColor = bg; if (color) _style.color = color; return ( <button style={_style} {...props}>{children}</button> ) }