Показывать div, когда установлен флажок «Истина», пользовательский блок Гутенберга

Я могу показать div всякий раз, когда пользователь проверяет ввод с типом флажка.

Чтобы увидеть поведение, которого я жду, я делюсь с вами скриншотом того, как выглядит дисплей.

Итак, как вы видите, я хочу показать div с возможностью добавления ссылки на вход.

Вот связанный код:

const {registerBlockType} = wp.blocks
const {InspectorControls, InnerBlocks} = wp.editor
const {RichText} = wp.blockEditor
import { useState } from '@wordpress/element';

registerBlockType('astra/listedosage', {
    title: 'Liste dosage ingrédients',
    category: 'widgets',
    icon: 'smiley',
    attributes: {
        Ingname: {type: "string"},
        Qtt: {type: "string"},
    },
    edit: function(props) {
        const ALLOWED_BLOCKS = ['astra/listedosage'];
        const [checked, setChecked] = useState(false);

        const handleChangeEvent = () => {
          // Change state to the opposite (to ture) when checkbox changes
          setChecked(!checked);
        };

        function updateIngname(e){
            props.setAttributes({Ingname : e.target.value})
        }
        function updateQtt(e){
            props.setAttributes({Qtt : e.target.value})
        }
        function updateLink(e){
            props.setAttributes({Link : e.target.value})
        }
        
        return (
            <div className = "blocListeDosage">

                   <div className = "blocListeDosageIngName">
                       <input type = "text" autocomplete = "off" placeholder = "Nom de l'ingrédient" onChange = {updateIngname} value = {props.attributes.Ingname} />
                   </div>

                   <div className = "blocListeDosageLink">
                       <div>Lien ?</div>
                       <input type = "checkbox" checked = {checked} onChange = {handleChangeEvent}/>
                   </div>

                   <div className = "blocListeDosageIngQtt">
                       <input type = "text" autocomplete = "off" placeholder = "Quantité" onChange = {updateQtt} value = {props.attributes.Qtt} />
                   </div> 
                   
{ checked && ( 
                   <div className = "blocListeDosageLinkHover">
                       <input type = "text" autocomplete = "off" placeholder = "Lien vers le produit"  onChange = {updateLink} value = {props.attributes.Link} />
                   </div>
)}
            </div>
        )
    },
    save: function (props) {
        return (
            <div className = "blocListeDosage">
                   
            </div>
        )
    }
})