How can I set a style based on reactive state with fallback to props?

const Internal = (props) => {
  const [clicked, setClicked] = createSignal(false);

  const style = mergeProps(props.style, { color: clicked() ? 'orange' : 'red' });

  return <button onClick={() => setClicked(c => !c)} style={style}>
    {props.children}
  </button>
}

function Counter() {
  return (
    <Internal style={{ color: 'blue', fontWeight: 'bold' }}>Click me</Internal>
  );
}