How to properly use toggleFloating

[fj-vega]

I'm not sure if I understood what toggleFloating is supposed to do, but I expected it to allow me to close the chatbot after opening it. I have set my chatbot using the useState hooks and passed the toggleFloating method to the headerComponent to use it in a button.

const App = () => {
  const [opened, setOpened] = useState(true);

  const toggleFloating = opened => {
    setOpened(opened);
  }

  return (
    <ThemeProvider theme={config.theme}>
      <ChatBot 
        floating="true"
        headerComponent={<Header toggleFloating={toggleFloating} />}
        steps={config.steps}
        opened={opened}
     />
    </ThemeProvider>
  )
};

const Header = ({ toggleFloating }) => (
  <Contenedor>
    <Imagen src="img/logo-full.svg" alt=""/>
    <button onClick={() => toggleFloating(false) }>Close</button>
  </Container>
)

When I click the button the toggleFloating methods actually runs and the state is updated, but nothing happens to the chatbot, it remains open. What am I doing wrong here?

[farisadlin]

I've stumbled upon your question. You've just wrong in one props:

floating="true"

Should be

floating={true}

it should be a boolean not a string