How to make props reactive?

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

const Btn = (props: any) => (
  props.open ? <button>test</button> : null
);

function Counter() {
  const [open, setOpen] = createSignal(false);

  return (
    <div>
    {String(open())} 
    <br/> 
    <button onClick={() => setOpen(!open())}> toggle </button>
    <br/>
    <Btn open={open()}/>
  </div>
  );
}

render(() => <Counter />, document.getElementById("app")!);

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

const Btn = (props: any) => (
  props.open ? <button>test</button> : null
);

function Counter() {
  const [open, setOpen] = createSignal(false);

  return (
    <div>
    {String(open())} 
    <br/> 
    <button onClick={() => setOpen(!open())}> toggle </button>
    <br/>
    <Btn open={open()}/>
  </div>
  );
}

render(() => <Counter />, document.getElementById("app")!);