How to sync textareas using react hooks?

I'm trying to sync two textareas when the checkbox is checked.

Here I used useState hook to control the checkbox and textareas but I think I'm missing the logic at the ternary operator, could anyone help in getting this right?

This is what I have tried to fix it but that doesn't work.

Here I used the variables ca for correspondence address and pa for permanent address

import React, {useState} from 'react' 

const Sync_address = () => {

const[pa, setPa] = useState('');
const changePa = e =>{
    setPa(e.target.value);
}

const[ca, setCa] = useState('');
const changeCa = e => {
   setCa(e.target.value);
}

const[checked, setChecked] = useState(true);
console.log(checked)
const handleChange = () => {
        setChecked(!checked)
        return setChecked ?  ca == pa : ca == ca
}


    return (
        <div id="sync-address" className="mx-auto container">
            <h2>Please enter the both the address</h2>
            <input type="checkbox"
            checked={checked}
            onChange={handleChange}
            />
            <span>sync address</span> 
            <br />
            <p>Permanent Address :</p>
            <textarea rows={5}
                      cols={50}
                      value={pa}
                      onChange={changePa}
            >
                      
            </textarea>
            <br />
            <p>Correspondance Address :</p>
            <textarea rows={5}
                      cols={50}
                      value={ca}
                      onChange={changeCa}
                      >
                        
            </textarea>
        </div>
    )

}


export default Sync_address

The warning I'm getting here is Expected '===' and instead saw '=='

I have tried to replace == with === but still the code works in same way.