I am fetching data from API and populating the input texts from the fretched email. I'm using bullet and setBullet to maintain the state. The problem is that I must define an initial item into the use state like this:

const [bullet, setBullet] = useState(['Temp']);

But defining it like this it obviously adds "Temp" as the first input and then all emails follow. But if I define the state like this:

const [bullet, setBullet] = useState([]);

I get errors in onChangeHandler and map function in useEffect.

const onChangeHandler = (index: number, value: string) => {
    setBullet((bullets) =>
      bullets.map((bullet, i) => (i === index ? value : bullet))
    );
  };

  useEffect(() => {
    fetch(
      "https://reqres.in/api/users?page=2")
        .then((res) => res.json())
        .then((json) => {
          json.data.map((data: any) => {
            setBullet((bullets) => [...bullets, data.email]);
            return console.log(data.email);
          })
        })
  }, [])

Error comes in setState function:

Argument of type '(bullets: never[]) => string[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
  Type '(bullets: never[]) => string[]' is not assignable to type '(prevState: never[]) => never[]'.
    Type 'string[]' is not assignable to type 'never[]'.
      Type 'string' is not assignable to type 'never'

To summarise this is what I'm getting. I want to remove the 'Temp' bullet from it.

Any help will be much appreciated.

Thank You