React Hooks with typescript: Property 'data' does not exist on type

Question

I have an error that makes no sense, I am typing the value of my state with hooks, but he says the error is not the same type.

Already tried with empty array and even array with some data and always error is the same.

import React, { useState } from 'react';
import { Row, Col } from 'config/styles';
import Bed from './Bed';

interface DataTypes {
  date: string;
  value: number;
}

function Beds(): JSX.Element {
  const { data, setData } = useState<DataTypes[]>([]);

  return (
    <>
      <Row>
        {data.map((d, i) => (
          <Col key={i} sm={16.666} lg={10}>
            <Bed {...d} />
          </Col>
        ))}
      </Row>
    </>
  );
}

export default Beds;

Erro this:

TypeScript error in /Users/keven/Documents/carenet/orquestra-frontend/src/Beds/index.tsx(11,11):
Property 'data' does not exist on type '[DataTypes[], Dispatch<SetStateAction<DataTypes[]>>]'

Answer 1

It should be an array, not an object:

const [data, setData] = useState<DataTypes[]>([]);

You have this indication in the error message:

type '[DataTypes[], Dispatch<SetStateAction<DataTypes[]>>]'

Answer 2

you should use const [ data, setData ] instead of const { data, setData }