nested array in Flatlist created with Redux

Question

So I'm trying to display an array with some data in a Flatlist, I use React-Redux to update the initial State in the Reducer, I do it by collecting all data in LIST CREATION screen, and I use .push to insert them in an array, then I use updateList to update the initial State of list, and I use getDerivedStateFromProps to get that list in TRIALLIST screen and display it in a Flatlist, the problem is that I unintentionally created nested arrays, and it doesn't let me display the data in the Flatlist, this is the example of an array I'm trying to display:

Array [
  Array [
    Object {
      "Name": Object {
        "Name": "John",
      },
      "key": 0.05992611071666909,
      "favNumber": 1,
      "age": 30,
    },
  ],
]

and here there are the various screens:

LIST CREATION

import { connect } from 'react-redux';
import { updateList } from '../../../../../redux/actions/index.js';


class trial extends Component {
  constructor(props) {
    super(props);
    this.state = {
      trial: '',
      list: [],
        };
  }

submitTrial(){
    let list = this.state.list;
    list.push({
      key: Math.random(),
      Name: this.props.route.params,
      favNum: favNum,
      age: age,
       });
    this.props.updateList(list);
    this.props.navigation.navigate("TrialList");
  }

 render() {    
    return (

            <Button transparent>
              <Icon
                name="checkmark"
                onPress={() =>  this.submitTrial()}
              />
            </Button>

const mapDispatchToProps = { updateList };

export default connect( mapDispatchToProps )( trial );

TRIALLIST

class TrialList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }


static getDerivedStateFromProps(props, state) {
 if (props?.list) {
  return {
    list: [...state.list, props.list],
  };
 }
  return null;
 }
  

  render() {
    return (
        <FlatList
            data={this.state.list}
            keyExtractor={(item, index) => item.key.toString()}
            contentContainerStyle={{ flexGrow: 1 , flexGrow: hp('20%')}}
            renderItem={({ item }) => (
              <View>
                <View>
                  <Text>
                    {item.Name.Name}
                  </Text>
                  <Text>
                     {item.favNumber}
                  </Text>
                  <Text>
                    {item.age}
                  </Text>
                 </View>
               </View> 
              />



 function mapStateToProps(store){
  return{
      list: store.userState.list
   };
  }
export default connect(mapStateToProps)(TrialList);

INDEX.JS

import { ADD_LIST } from "../constants/index";

export const updateList = (list) => {
  return console.log({ type: ADD_LIST, payload: list})
}

REDUCER

import { USER_STATE_CHANGE, ADD_LIST } from "../constants";

const initialState = {
  currentUser: null,
  list: null,
};



export const user = (state = initialState, action) => {
  switch (action.type){
      case USER_STATE_CHANGE:
        return {
          ...state,
          currentUser: action.currentUser,
        };
      case ADD_LIST: 
      return{
        ...state,
        list: [...action.payload],
      }
      default:
        return state
  }
  
};

Thanks in advance for your help.