How to create subList into List structure. React JS - reactjs

Question

I have been given the following task:
There an inpunt field with ADD button. You can create some text messages and post them press ADD. After you create the first one ADD SUBLIST and REMOVE buttons occure. When you press ADD SUBLIST you got a sublist on current list section and this sublist starts with input field and ADD button and able to create text messages and sublists as noted above. After sublist created the ADD SUBLIST BUTTON change for REMOVE SUBLIST.
Below my structure of listReducer.js:
const defaultState = {
elements: [{
id: 0,
text: '',
topPos: false,
downPos: false,
isInputField: true,
isDelButton: false,
isAddButton: true,
isSublist: false,
subList: []
}]
}
export const ADD_VALUE = 'ADD_VALUE'
export const REMOVE_VALUE = 'REMOVE_VALUE'
export const SET_UP = 'SET_UP'
export const SET_DOWN = 'SET_DOWN'
export const ADD_SUBLIST = 'ADD_SUBLIST'
export const listReducer = (state = defaultState, action) => {
switch (action.type) {
case ADD_VALUE:
return {
...state,
elements: [...state.elements, {
...state.elements.map(
(elem) => ({
...elem,
id: Date.now(),
text: action.payload,
isDelButton: true,
isAddButton: false,
isInputField: false
}))[0]
}]
}
case REMOVE_VALUE:
return {...state, elements: state.elements.filter(element => element.id !== action.payload)}
case ADD_SUBLIST:
return {
...state,
elements: [...state.elements, {
...state.elements.map(
(elem) => ({
...elem,
id: Date.now(),
isSubList: true,
subList: [defaultState] //have problem here
}))[0]
}]
}
default:
return state
}
}
export const addValueCreator = (payload) => ({type: ADD_VALUE, payload})
export const removeValueCreator = (payload) => ({type: REMOVE_VALUE, payload})
export const addSubListCreator = (payload) => ({type: ADD_SUBLIST, payload})
Item file
import React from 'react';
import MyInput from "../UI/MyInput";
import MyButton from "../UI/MyButton";
import MyLi from "../UI/MyLi";
import {useState} from "react";
import {useDispatch} from "react-redux";
import {addSubListCreator, addValueCreator, removeValueCreator} from "../reducer/listReducer";
function Item({element, children, ...props}) {
const [value, setValue] = useState('');
const dispatch = useDispatch();
const addElement = (value) => {
dispatch(addValueCreator(value));
};
const removeElement = (id) => dispatch(removeValueCreator(id))
const addSublist = () => {
const newSubElement = {id: Date.now()};
// const currentID = element.id;
dispatch(addSubListCreator(newSubElement))
}
//console.log('Item', element);
return (
<MyLi>
{element.isInputField ? <MyInput
type="text" value={value}
placeholder='Enter some text here'
onChange={event => setValue(event.target.value)}
/> : children}
<div>
{element.isSublist ? <MyButton>Delete Sublist</MyButton> : !element.isAddButton ? <MyButton
onClick={() => addSublist()}>Add
Sublist</MyButton> : null}
{element.isDelButton ? <MyButton
onClick={() => removeElement(element.id)}
>Remove</MyButton> : null}
{element.isAddButton ? <MyButton
onClick={() => {
addElement(value);
setValue('')
}}
>Add</MyButton> : null}
</div>
</MyLi>
);
}
export default Item;
ListItem file
import React, {useState} from "react";
import Item from "../Components/Item";
import {useSelector} from "react-redux";
const ListItem = () => {
const elements = useSelector((state) => state.elements);
//console.log('List elems ', elements)
return (
<ul>
{elements.map(
element => {
console.log('element subList', element.subList);
return (<Item element={element} key={element.id}>{element.text}
{element.subList.length > 0 ? element.subList.map(
sub => {
console.log('sub', sub.elements);
return (
<ul><Item key={sub.elements.id} element={sub.elements}>{sub.elements.text}</Item>
</ul>)
}).reverse() : null}
</Item>)
}).reverse()}
</ul>
);
};
export default ListItem;
How to create correct structure for this?