Creating a Popover responsive component in Typescript

Question

I am creating a Popover component in TypeScript. How can I describe correct the applied style and add function (how to close the popover, because currently I can only open it)?

Taking in account documentation I was trying to add styles using containerStyle inside <Popover>, but it gives me an error.

import { Popover } from 'react-tiny-popover'
import './popover.scss'
import {ReactElement} from "react";
import {Button} from "../Button/Button";

interface PopOverProps {
    label?:string
    info?:ReactElement | undefined
    isPopoverOpen?:boolean
}

export const PopOver = ({
    label="Info",
    isPopoverOpen=false,
    info=(
      <>
          <p>Hello world!</p>
          <p>Example of how does the long text look here - <em>lorem ipsum</em> <strong>lorem ipsum</strong></p>
      </>
    ),
    ...props
}: PopOverProps) => {
    return (
        <Popover
            isOpen={isPopoverOpen}
            content={info}
        >
            <Button
                label={label}
                size={"small"}
                kind={"outline"}
            />
        </Popover>
    )
}

Answer 1

What is the error you get ?

Did you read this;

“Your popover content is rendered to the DOM in a single container div. If you'd like to apply style directly to this container div, you may do so here! Be aware that as this div is a DOM element and not a React element, all style values must be strings. For example, 5 pixels must be represented as '5px', as you'd do with vanilla DOM manipulation in Javascript.”?