useState define an empty array with new Array method

I am getting data which is an array of objects from the store. In useState I want to set an array of data.length size all set to false initially. But when I set the value it returns an empty array [] for each of the state variable I set. I also tried updating the state in the useeffect but nothing works. I am unable to figure out what is the issue here.

function Datatable() {
       let data = useSelector((state) => state.dish);
      const [clicked1, setClicked1] = useState(new Array(data.length).fill(false));
      const [clicked2, setClicked2] = useState(new Array(data.length).fill(false));
      const [clicked3, setClicked3] = useState(new Array(data.length).fill(false));
      const dispatch = useDispatch();
      function setAllStates() {
        setClicked1(new Array(data.length).fill(false));
        setClicked2(new Array(data.length).fill(false));
        setClicked3(new Array(data.length).fill(false));
      }
      useEffect(() => {
        setAllStates();
      }, []);

Via Active questions tagged javascript - Stack Overflow https://ift.tt/NSalmI1