Rect Quill unable to switch between snow and bubble team when editor is focus vs blurred

Question

I am trying to implement a react quill text editor where the user can enter text and format it thanks to the snow theme but when the editor is not focused I would like the editor's theme to switch to bubble so the toolbar can disappear. In the code below I am trying to achieve that while keeping the "text" variable updated with the user's latest input anytime the the user clicks out of the editor. I was trying to use onBlur and onFocus but I am having a hard time as I am not very experienced with this. Can someone help ?

note that you I have moved the themes css files so you would need to change the import paths

import ReactQuill from 'react-quill'
import '../../../quill.snow.css'
import '../../../quill.bubble.css'
import {useState} from 'react'

function EditorInput(props){
    const [text, setText] = useState("")
    const [isSnow, setIsSnow] = useState("snow");
    return <div className="mb-4">
        <ReactQuill
           id='editor'
           onBlur={() => setIsSnow("bubble")}
           onFocus={() => setIsSnow("snow")}
           style={{
               background: "#EFF4FA",
               color: "black",
               minHeight: '200px',
               resize: 'vertical',
               border:null
           }}
           theme={isSnow}

           value={text}
           onChange={() => {
               setText()
           }}
       />

    </div>
}

export default EditorInput;