ButtonWithPanel and ArrowPanel components use a mix of state and props

Our components `ButtonWithPanel` and `ArrowPanel` are old and use a mix of state and props that's not very consistent.

A good example is the `open` prop in `ButtonWithPanel` that's used in tests only, and as a result is buggy: the `open` state in `ArrowPanel` stays `false` when rendering with the `open` prop set to true, and then this doesn't behave very well for some things.

Also we use direct calls, which isn't a good practice.

We should rewrite these 2 components by keeping a state only in `ButtonWithPanel`, while `ArrowPanel` should use the props as only source of truth. We should replace the direct calls with props changes.

┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-115)