The reason why clicking on one checkbox deactivates the entire input

I’m facing a problem that I seem to know but I don’t know. I made “State” by [checked]. There is a problem that if you turn this to the map and click only one checkbox, the whole is clicked. So I put {cked[idx]} to solve it, but my senior advised me that there was a problem with the code.
Because [checked] is in the form of “Boolean” and idx is “number”.

And input has a ‘disabled’ attribute. I know that this is also deactivated as a whole because I put ‘checked’ in. By the way, I want each of them to be deactivated when I press the check box. But I don’t know how. I searched for stack overflow, but I couldn’t find a similar case to mine.
I believe you guys can help me.

const [checked, setChecked] = useState(false);
.
.
.
{keys &&
          keys?.map((item: any, idx: number) => {
            return (
              <div key={idx}>
                <Box component="form" className={classes.Box}>
                  <div className={classes.typeText}>{item.columnName}</div>
                  <div className={classes.flexWrap}>
                    <TextField
                      id="outlined-basic"
                      label={item.type}
                      variant="outlined"
                      className={classes.filled}
                      disabled={checked} //hear❗️
                    />
                    <FormControlLabel
                      value="end"
                      control={
                        <Checkbox
                          className={classes.checkBox}
                          color="primary"
                          checked={checked[idx]} //hear❗️
                          onChange={handleCheckboxChange}
                        />
                      }
                      label="Null"
                      labelPlacement="end"
                    />
                  </div>
                </Box>
              </div>
            );
          })}