Using redux for editing fields without redux-forms

Question

I am making a page which has many editable input fields. I am using redux-toolkit and redux-thunk for this.

I am fetching data from api and put them into redux store. First render of component I want to reflect data in the store to the component's local state so that I can edit them and onSubmit of form, I am planning to re-put new values to store again.

1. Is this good approach?
2. Now it does not render anything and I think it because component rendering before api response arrives.
3. Is it possible without using redux-forms?

Component

import React, { useEffect, useState } from 'react'
import { Col, Row } from 'reactstrap'
import PreviewCaseTable from './refactor/PreviewCaseTable'
import { useDispatch, useSelector } from 'react-redux'
import { fetchCases, fetchCollections } from '../../../store/case/caseSlicer'

const TaskPreview2 = (props) => {

  const dispatch = useDispatch()
  const TaskStore = useSelector(store => store.Task)
  const CaseStore = useSelector(store => store.Case)
  const [cases, setCases] = useState(CaseStore.cases)
  const [collections, setCollections] = useState(CaseStore.collections)

  useEffect(() => {
    dispatch(fetchCases({
      taskId: TaskStore.selectedTask.taskId,
      page: 0,
      size: 100,
      taskType: TaskStore.selectedTask.taskType
    }))
    dispatch(fetchCollections({ taskId: TaskStore.selectedTask.taskId }))
  }, [])

  return (
    <div className="page-content">
      <Row>
        <Col>
          {/*<UpdateWeightCard/>*/}
        </Col>
        <Col>
          {/*<StrategyCard/>*/}
        </Col>
      </Row>
      <Row>
        {console.log("Cases:", cases)}
        {cases.length > 0 && <PreviewCaseTable
          cases={cases}
          collections={collections}/>}
      </Row>
    </div>

  )
}