[Solved]-Utilizing the "Ok" button in ANTd Modal in React-Reactjs

Assuming all the routes are set up properly in your App.js, add the following changes:

Add this to your import list:

import { Link } from "react-router-dom";

In the Movies function, add the const [activeForm, setActiveForm] = useState(false); as shown below

function Movies() {

const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [query, setQuery] = useState('');
const [activateModal, setActivateModal] = useState(false);
const [details, setShowDetails] = useState(false);
const [detailRequest, setDetailRequest] = useState(false);
const [activateForm, setActivateForm] = useState(false);

In the return for your function, in the div tag right under the "Content" tag, add ActivateForm={setActivateForm} as shown below.

                <div style={{ background: '#4a576e', padding: 60, minHeight: 300 }}>
                    <SearchBox searchHandler={setQuery} />
                    <br />
                    <Row justify="center">
                        { data !== null && data.length > 0 && data.map((result, index) => (
                            <MovieCard 
                                ShowDetails={setShowDetails} 
                                DetailRequest={setDetailRequest}
                                ActivateModal={setActivateModal}
                                ActivateForm={setActivateForm}
                                key={index} 
                                {...result} 
                            />
                        ))}
                    </Row>
                </div>

Finally, in the Modal tag, append to the "onOk" as such, and also in your Modal footer, add the following for "onClick".

                    <Modal
                    title='Details'
                    centered
                    visible={activateModal}
                    onCancel={() => setActivateModal(false)}
                    onOk={() => setActivateForm(true)}
                    width={800}
                    footer={[
                        <Button key="cancel" onClick={() => setActivateModal(false)}>
                            Cancel
                        </Button>,
                        <Button key="schedule" onClick={() =>setActivateForm(true)}><Link to='/ScheduleForm'>Schedule</Link ></Button>
                      ]}
                    >
                    { detailRequest === false ?
                        (<MovieDetail {...details} />) :
                        (<Loader />) 
                    }
                </Modal>