Failed to create check box preview using defaultChecked in reactjs - html

Question

I'am new using reactjs and looks like I am following the tutorial with old version of react. So, I have some roles with their permissions, the problem is when I want to make changes of the role permissions I need to preview them with previous checked permission. As you can see the image below I have the permissions data, but when I try to put them into checkbox using default checked there is nothing happen.
here is my code
RoleEdit.tsx
import axios from "axios";
import { SyntheticEvent, useEffect, useState } from "react";
import { Navigate, useParams } from "react-router-dom";
import Wrapper from "../../components/Wrapper";
import { Permission } from "../../models/permissions";
const RoleEdit = (props:any) => {
const [permissions, setPermissions] = useState([]);
const [selected, setSelected] = useState([] as number[]);
const [name, setName] = useState('');
const [redirect, setRedirect] = useState(false);
const {id} = useParams();
useEffect( () => {
(
async () => {
const response = await axios.get('permissions');
setPermissions(response.data);
const {data} = await axios.get(`roles/${id}`);
setName(data.name);
setSelected(data.permissions.map((p : Permission) => p.id));
}
)();
}, [id]);
const check = (id: number) => {
if(selected.some(s => s === id)){
setSelected(selected.filter(s => s !== id));
return;
}
setSelected([...selected, id]);
}
const submit = async (e: SyntheticEvent) => {
e.preventDefault();
await axios.post('roles', {
name,
permissions: selected
});
setRedirect(true);
}
if(redirect){
return <Navigate to="/roles"/>
}
return(
<Wrapper>
<form onSubmit={submit}>
<div className="mb-3 mt-3 row">
<label className="col-sm-2 col-form-label">Role Name</label>
<div className="col-sm-10">
<input className="form-control" defaultValue={name} onChange={e => setName(e.target.value)}/>
</div>
</div>
<div className="mb-3 row">
<label className="col-sm-2 col-form-label">Permissions</label>
<div className="col-sm-10">
{permissions.map((p: Permission) => {
return(
<div className="form-check form-check-inline col-3" key={p.id}>
<input className="form-check-input" type={"checkbox"}
value={p.id}
defaultChecked={selected.some( s => s === p.id)}
onChange={()=> check(p.id)}/>
<label className="form-check-label">{p.name}</label>
</div>
)
})}
</div>
</div>
<button className="w-100 btn btn-lg btn-primary" type="submit">Save</button>
</form>
</Wrapper>
);
};
export default RoleEdit;
please help me solve the problem so I can continue the tutorial. Thankyou