Состояние Redux изменилось, но свойства компонента не обновляются

Я использую redux для управления модальным компонентом Ant Design с логическим состоянием. По сути, у него есть кнопка, которая отправляет действие для изменения состояния, и компонент будет считывать значение состояния.

Состояние изменяется правильно, но значение реквизита компонента не обновляется соответствующим образом. Не уверен, почему это не работает.

Я пробовал разные подходы в редукторе, такие как создание нового логического объекта, чтобы избежать изменения состояния, но не повезло.

myAction.js

export const modalVisibilityOn = () => ({
    type: 'MODAL_ON'
})

export const modalVisibilityOff = () => ({
    type: 'MODAL_OFF'
})

myReducer.js

const modalVisibility = (state = false, action) => {
    switch (action.type){
        case 'MODAL_ON':
            return true
        case 'MODAL_OFF':
            return false
        default:
            return state
    }
}

export default modalVisibility

myRootReducer.js

import { combineReducers } from 'redux'
import modalVisibility from './signPage/myReducer'

export default combineReducers({
    modalVisibility
})

myModal.js

import React from "react";
import PropTypes from 'prop-types'
import { Modal, Input } from 'antd';

import { connect } from 'react-redux'
import { modalVisibilityOff } from '../../reducers/signPage/myAction'

class myModal extends React.Component {

    render() {
    const { visibility, handleOk, handleCancel } = this.props;

    myModal.propTypes = {
      visibility: PropTypes.bool.isRequired,
      handleOk: PropTypes.func.isRequired,
      handleCancel: PropTypes.func.isRequired,
        }

        return (
            <Modal
              title = "Sign"
              visible = {visibility}
              onOk = {handleOk}
              onCancel = {handleCancel}
              closable = {false}
            >
              <p>Please input your staff ID</p>
              <Input addonBefore = "Staff ID" />
            </Modal>
        );
    }
}

const mapStateToProps = state => {
  return {
    visibility: state.modalVisibility
  }
}

const mapDispatchToProps = dispatch => ({
  handleOk: () => dispatch(modalVisibilityOff()),
  handleCancel: () => dispatch(modalVisibilityOff()),
})

export default connect(
  mapStateToProps,mapDispatchToProps
)(myModal)

myModalContainer.js

import React from "react";
import { Input } from "antd";
import { Button } from 'antd';
import { Row, Col } from 'antd';
import { Typography } from 'antd';

import PropTypes from 'prop-types'
import myModal from '../../dialogs/signPage/myModal';

import { connect } from 'react-redux'
import { modalVisibilityOn } from '../../reducers/signPage/myAction'

class myModalContainer extends React.Component {

  render() {
        const { Title } = Typography;

        const { onClick } = this.props;

    myModalContainer.propTypes = {
      onClick: PropTypes.func.isRequired
        }

    return (
            <div className = "search-container-parent">
                <Row className = "search-container">
                    <Col className = "search-col1" xs = {24} sm = {12}>
                        <Input size = "large" style = {{width:'40%'}} id = "issueReturnNo" placeholder = "QR code here"/>
                        <Button size = "large">SEARCH</Button>
                        <div className = "signBtn-div">
                            <Button size = "large" type = "primary" onClick = {onClick} >SIGN</Button>
                            <myModal />
                        </div>
                    </Col>
                    <Col xs = {24} sm = {12}>
                        <Title className = "issueLog-title" level = {3} style = {{color:"#F08080"}}>Issue</Title>
                    </Col>
                </Row>
            </div>
    );
  }
}

    const mapDispatchToProps = dispatch => ({
        onClick: () => dispatch(modalVisibilityOn())
    })

  export default connect(
    null, mapDispatchToProps
  )(myModalContainer);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { createStore } from 'redux'
import { Provider } from 'react-redux'
import rootReducer from './myRootReducer'

const store = createStore(rootReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

ReactDOM.render(
    <Provider store = {store}>
        <App />
    </Provider>,
 document.getElementById('root'));
serviceWorker.unregister();

Я ожидаю, что реквизиты видимости на myModal.js будут true, когда нажата кнопка знака на myModalContainer.js, но она продолжает отображаться false.

Любая помощь будет оценена по достоинству. Спасибо!