filter array of object with multiple condition and return single array of object on the basis of checkbox selection

I am trying to filter array of objects based on different checkbox selection. but filter doesn't work as expected. Below is code i am trying. I have taken default state for all checkboxes and single function to "changeCheckbox" to update all checkbox of useState. useEffect is updating checkbox data based on dependency when any of the checkbox is clicked and filtering data on multiple if conditions. and at last showing updated state on html.

Require output : what i need is final array with updated value from checkbox

// all default checkbox states
const [allCheck, setAllCheck] = useState({
  connected: true,
  disconnected: true,
  type1: true,
  type2: true,
});

// checkbox state handler
const changeCheckbox = (checkbox) => {
  setAllCheck({
    ...allCheck,
    [checkbox]: !allCheck[checkbox],
  });
};

// useEffect
useEffect(() => {
  const renderFilterdCheckbox = () => {
    setLoading(true);
    let myData;

    for (const property in allCheck) {
      // console.log(`${property}: ${allCheck[property]}`);
      console.log('property : ', property, allCheck[[property]]);

      data.filter((filtered) => {
        if (property === 'connected' && allCheck[property]) {
          myData = filtered.isConnected === allCheck[property] ? filtered : null;
        }
        if (property === 'disconnected' && allCheck[property]) {
          return filtered.isConnected === !allCheck[property] ? filtered : null;
        }
        if (property === 'type1' && allCheck[property]) {
          myData = filtered.type === 'deviceType1' && filtered.subType !== 'someType2' ? filtered : null;
        }
        if (property === 'type2' && allCheck[property]) {
          myData = filtered.type === 'deviceType2' && filtered.subType === 'someType2' ? filtered : null;
        }
        // return myData;
      });
    }
  };
  renderFilterdCheckbox();
}, [allCheck]);

//HTML
<div className='input-holder mt-1'>
    <label className='cb-container'>
    <span className='cb-ana connected'>Connected</span>
    <input type='checkbox' checked={allCheck.connected} onChange={() => changeCheckbox('connected')} />
    <span className='checkmark' />
    </label>
</div>
<div className='input-holder'>
    <label className='cb-container'>
    <span className='cb-ana disconnected'>Disconnected</span>
    <input type='checkbox' checked={allCheck.disconnected} onChange={() => changeCheckbox('disconnected')} />
    <span className='checkmark' />
    </label>
</div>

//sample input
data = [{
    city: "New York"
    coordinates: (2) ["23.024349", "72.530151"]
    currentEvent: "-"
    deviceAddress: 704
    id: 997673378
    zipcode: 329353
    },{
    city: "Ahmedabad"
    coordinates: (2) ["23.024349", "72.530151"]
    currentEvent: "-"
    deviceAddress: 704
    id: 997673378
    zipcode: 329353
    }]

given above sample list of checkboxes