radio not clicking on modal

[allphonesblog]

i have two modal and radio input in it, when i open the modal its not checked , i dont know why

const From = () => {
        const [index, setIndex] = React.useState(0)
        return (
            <HyperModal
            isFullscreen

            renderOpenButton={requestOpen => (

            <h2 className="fmt" data-target="modal-ter" style={{"cursor":"pointer"}} onClick={requestOpen}>LOS</h2>
        )}
    >
        {(props: ModalStackProps) => (
         <ModalStack {...props}> // !!! It's very important to provide props to ModalStack
        <div style={{ color: 'red' }}>
            <div>1</div>
<button onClick={() => setIndex(1)}>open nested</button>
<button onClick={() => props.handleClose()}>close</button>
</div>


</ModalStack>

)}

    <div className="tabsx">

        <div className="tabx">
            <input type="radio" id="tab1" name="tab-group" defaultChecked />
                <label htmlFor="tab1">SEARCH</label>
<div className="tab-contentx">

    <div className="field">

        <div className="control" id="searchdiv">
            <p style={{marginTop: '-70px', position: 'absolute'}} className="title">move From</p>

            <input className="input is-large" type="text" placeholder="going FROM" style={{border: '3px solid black', fontWeight: 'bold'}} />

                </div>
</div>

</div>
</div>
<div className="tabx">
    <input type="radio" id="tab2" name="tab-group" />
        <label htmlFor="tab2">RECENT</label>
<div className="tab-contentx">
  <div className="card">
      <div className="card-content">
          <p className="subtitle">
            Go to test
                  </p>

          </div>

      </div>

</div>
</div>


</div>



    </HyperModal>
)
}

const To = () => {
    const [index, setIndex] = React.useState(0)
    return (
        <HyperModal
        isFullscreen

        renderOpenButton={requestOpenTo => (

        <h2 className="fmt" data-target="modal-ter" style={{"cursor":"pointer"}} onClick={requestOpenTo}>TO</h2>
    )}
>
    {(props: ModalStackProps) => (
     <ModalStack {...props}> // !!! It's very important to provide props to ModalStack
    <div style={{ color: 'red' }}>
        <div>1</div>
<button onClick={() => setIndex(1)}>open nested</button>
<button onClick={() => props.handleClose()}>close</button>
</div>


</ModalStack>

)}

    <div className="tabsx">

        <div className="tabx">
            <input type="radio" id="tabTO" name="tab-group" defaultChecked />
                <label htmlFor="tabTO">SEARCH</label>
<div className="tab-contentx">

    <div className="field">

        <div className="control" id="searchdiv">
            <p style={{marginTop: '-70px', position: 'absolute'}} className="title">Take To</p>

<input className="input is-large" type="text" placeholder="go TO" style={{border: '3px solid black', fontWeight: 'bold'}} />

</div>
</div>

</div>
</div>
<div className="tabx">
    <input type="radio" id="tab2To" name="tab-group" />
        <label htmlFor="tab2To">RECENT</label>
<div className="tab-contentx">
    <div className="card">
        <div className="card-content">
            <p className="subtitle">
               test
                    </p>

</div>

</div>

</div>
</div>


</div>



</HyperModal>
)
}