When I rewrite class component to functional - my drawing screen split into two

This is the example code converted into a functional component:
import React, { useState, useEffect } from "react";
import { Jsme } from "jsme-react";
function JsmeContainer() {
const [smiles, setSmiles] = useState("");
useEffect(() => {
console.log(smiles);
}, [smiles]);
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={setSmiles}
/>
</div>
);
}
export default JsmeContainer;