Remove item from list with redux/ hooks not working

I am making a watchlist component using redux/react/hooks. Component is in 3 pieces (form to add to list, container to map over securities, and security to display each item)

So far I have been able to add values by dispatching addStock in the form component. I tried to do the same thing in security component for deleteStock but it isn't working/ reloads page.

reducer:

const stockSelector = (state = STOCK_STATE, action) => {
    switch (action.type) {
        case STOCK_SELECTED:
            return action.payload;
        case FETCH_STOCK_LIST:
            return { ...state, watchlist: action.payload.select, title: action.payload.name, loading: false};
        case STOCK_LIST_LOADING:
            return {...state, loading: true}
        case ADD_STOCK:
            return { ...state, watchlist: [action.payload, ...state.watchlist] };
        case DELETE_STOCK:
            return { 
                ...state,
                watchlist: [
                    ...state.watchlist.slice(0, action.payload),
                    ...state.watchlist.slice(action.payload + 1)
                ],
             };
        default:
            return state;
    }

action

export const deleteStock = (payload) => ({
    type: DELETE_STOCK,
    payload,
});

watchlist component

const Watchlist = ({selected, watchlists, number}) => {
    const dispatch = useDispatch();
    const [taskList, setTaskList] = useState(['AAPL', 'MSFT', 'AMZN'])
    const [list, setList] = useState(selected)
    const [allList, setAllList] = useState(watchlists)
    const [selectNumber, setSelectNumber] = useState(number)

    const selectWatchlist = async () => {
        setList(selected)
        setSelectNumber(number)
    }

    useEffect(() => {
        selectWatchlist()
            .then(dispatch(fetchStockList(selectNumber)))
    }, []);

    return (
        <React.Fragment>
        <Col className="watchlist-master-col">
            <Row className="watchlist-form-row">
                <Col>
                    <AddWatchlistForm className="watchlist-form" />
                </Col>
            </Row>
            <Row className="watchlist-list-row">
                <ListSecurityContainer
                    list={taskList}
                    className="watchlist-list"
                    number={number}
                />
            </Row>
            <Row>
                <Modal className='modalOne' />
            </Row>
        </Col>
        <Modal />
    </React.Fragment>
    )
    
}

const mapStateToProps = (state) => {
    console.log(state)
    return {
        selected: state.Watchlist.stock.title,
        watchlists: state.Watchlist.watchlist.watchlist,
        watchlist: state.Watchlist.stock.watchlist,
        number: state.Watchlist.watchlist.number,
        

    }
}

container

const ListSecurityContainer = ({loading, stocks}) => {
    const dispatch = useDispatch();

    const handleCloseTask = (id) => {
        dispatch(deleteStock(id))
    }

    if (loading === false) {
        return (
            <React.Fragment>
                <Col>
                    {stocks.map((value, index) => (
                        <Security
                            key={stocks[index]}
                            id={index}
                            {...value}
                            name={value}
                            // onClose={handleCloseTask}
                            className="security-elem"
                        />
                    ))}
                </Col>
            </React.Fragment>
        );
    }
    return <div>Loading...</div>


}

const mapStateToProps = (state) => {
    console.log(state.Watchlist.stock.watchlist)
    return { 
        stocks: state.Watchlist.stock.watchlist,
        loading: state.Watchlist.stock.loading
    }
}

security

const Security = (value) => {
    const dispatch = useDispatch();
    const [taskName, setTaskName] =useState(value.name)

    const removeTask = () => {
        dispatch(deleteStock(taskName))
    }

    return (
        <div className="list-group-item">
            {value.name}
            <button onClick={removeTask()} style={{ float: 'right' }}>
                <i className="glyphicon glyphicon-remove"></i>
            </button>
        </div>
    );

}