Erroneous `classname`, `data-target` and `data-toggle`

[mrakgr]

I am trying to follow a React course for beginners on Youtube with Feliz. I got this piece of React html and want to convert it to a React element.

<nav className="navbar navbar-expand-lg navbar-light bg-light">
    <a className="navbar-brand" href="#">Navbar</a>
    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
    </button>

    <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav mr-auto">
        <li className="nav-item active">
            <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
        </li>
        <li className="nav-item">
            <a className="nav-link" href="#">Link</a>
        </li>
        <li className="nav-item dropdown">
            <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            </a>
            <div className="dropdown-menu" aria-labelledby="navbarDropdown">
            <a className="dropdown-item" href="#">Action</a>
            <a className="dropdown-item" href="#">Another action</a>
            <div className="dropdown-divider"></div>
            <a className="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
        <li className="nav-item">
            <a className="nav-link disabled" href="#">Disabled</a>
        </li>
        </ul>
        <form className="form-inline my-2 my-lg-0">
            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

When I use the tool I get:

Html.nav [
    prop.classname "navbar navbar-expand-lg navbar-light bg-light"
    prop.children [
        Html.a [
            prop.classname "navbar-brand"
            prop.href "#"
            prop.text "Navbar"
        ]
        Html.button [
            prop.ariaControls "navbarSupportedContent"
            prop.ariaExpanded "false"
            prop.ariaLabel "Toggle navigation"
            prop.classname "navbar-toggler"
            prop.dataTarget "#navbarSupportedContent"
            prop.dataToggle "collapse"
            prop.type' "button"
            prop.children [
                Html.span [
                    prop.classname "navbar-toggler-icon"
                ]
            ]
        ]
        Html.div [
            prop.classname "collapse navbar-collapse"
            prop.id "navbarSupportedContent"
            prop.children [
                Html.ul [
                    prop.classname "navbar-nav mr-auto"
                    prop.children [
                        Html.li [
                            prop.classname "nav-item active"
                            prop.children [
                                Html.a [
                                    prop.classname "nav-link"
                                    prop.href "#"
                                    prop.children [
                                        Html.text "Home "
                                        Html.span [
                                            prop.classname "sr-only"
                                            prop.text "(current)"
                                        ]
                                    ]
                                ]
                            ]
                        ]
                        Html.li [
                            prop.classname "nav-item"
                            prop.children [
                                Html.a [
                                    prop.classname "nav-link"
                                    prop.href "#"
                                    prop.text "Link"
                                ]
                            ]
                        ]
                        Html.li [
                            prop.classname "nav-item dropdown"
                            prop.children [
                                Html.a [
                                    prop.ariaExpanded "false"
                                    prop.ariaHaspopup "true"
                                    prop.classname "nav-link dropdown-toggle"
                                    prop.dataToggle "dropdown"
                                    prop.href "#"
                                    prop.id "navbarDropdown"
                                    prop.role "button"
                                    prop.text "Dropdown "
                                ]
                                Html.div [
                                    prop.ariaLabelledby "navbarDropdown"
                                    prop.classname "dropdown-menu"
                                    prop.children [
                                        Html.a [
                                            prop.classname "dropdown-item"
                                            prop.href "#"
                                            prop.text "Action"
                                        ]
                                        Html.a [
                                            prop.classname "dropdown-item"
                                            prop.href "#"
                                            prop.text "Another action"
                                        ]
                                        Html.div [
                                            prop.classname "dropdown-divider"
                                        ]
                                        Html.a [
                                            prop.classname "dropdown-item"
                                            prop.href "#"
                                            prop.text "Something else here"
                                        ]
                                    ]
                                ]
                            ]
                        ]
                        Html.li [
                            prop.classname "nav-item"
                            prop.children [
                                Html.a [
                                    prop.classname "nav-link disabled"
                                    prop.href "#"
                                    prop.text "Disabled"
                                ]
                            ]
                        ]
                    ]
                ]
                Html.form [
                    prop.classname "form-inline my-2 my-lg-0"
                    prop.children [
                        Html.input [
                            prop.classname "form-control mr-sm-2"
                            prop.type' "search"
                            prop.placeholder "Search"
                            prop.ariaLabel "Search"
                        ]
                        Html.button [
                            prop.classname "btn btn-outline-success my-2 my-sm-0"
                            prop.type' "submit"
                            prop.text "Search"
                        ]
                    ]
                ]
            ]
        ]
    ]
]

For some reason className in all small letters, but the data-target and the data-toggle properties do not even exist on the F# side, so I am not sure how to fix this. Any advice?

[mrakgr]

I realized only now that there is a prop.custom just for occasions such as these. I guess Feliz just doesn't have some of the properties I have to hack them in, but it is weird that the className is not getting printed right.