If you create a new style in App.css and apply that to the div in the suspense you can have the loading message appear in the correct location:
App.css

.enrollListSuspense {
  position: absolute;
  top: 800px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 450px;
  text-align: center;
  display: flex;
}

updated suspense:

      <Suspense fallback={<div className="enrollListSuspense"> Enrolled student details loading......</div>}>

In chapter 4, the file EnrolmentFrom.js has the following line for handleClick function:

   props.setUpdatedSeats(props.currentSeats - 1);

When an edit is made, the seat number is decreased (which shouldn't happen if program is not changed).

I think the line should be replaced with:

   if (btnValue === "Enrol") {
        props.setUpdatedSeats(props.currentSeats - 1);
   }

Note: shouldn't "Enrol" be "Enroll" throughout the code.

Switching between defaultChecked and checked={true}

Page 105:

UG has defaultChecked

<li className="parentLabels" onChange={handleChange}>
<input
type="radio"
value="UG"
name="programGroup"
defaultChecked
/>

Page 106 Bullet 3:

description says defaultChecked, code sample uses checked={true}:

<li className="parentLabels" onChange={handleChange}>
<input
type="radio"
value="UG"
name="programGroup"
checked={true}
/>

Naming issue (handleSubmit vs handleClick):

Page 111 bullet #8:

You wrote this:

As opposed to having a form submit event, we have a button click listener. The code behaves exactly like before. Now, there is no onSubmit event in the form. Instead, there is an onClick event on the button, which calls the same handleSubmit function:

<input
type="submit"
id="btnEnrol"
name="Enrol"
alt="Enrol"
value="Enrol"
onClick={handleClick}
/>

You probably meant that it calls the same functionality. But the name has changed, so it's not calling handleSubmit. The next bullet on page 112 renames it. the order of these directions, especially with the page break (which I know you don't have any control over) is confusing.

Missed task (adding props into EnrolList)

Page 124

Up to this point, the EnrolList arrow function is:

const EnrolList = () => {

The code snippet to use the effect requires the arrow function to be updated to this:

const EnrolList = (props) => {```  
but that instruction isn't given.  
---  

Chapter 3, Page 86 in the main code listing for App.js at the top of the page:
<EnrolmentForm chosenProgram={program} />

but Page 87 shows this in the description:
<EnrolmentForm selectedProgram={program} />

Page 88 shows this:
<h1>{props.selectedProgram} Student Details</h1>

If the reader uses the main listing and not the detail, the program will never show in the H1 tag.

The repo shows chosenProgram for both, not selectedProgram

Page 158 has the following text, which appears to be the same info twice:

Previously, in this function, we were setting available seats using props.setUpdatedSeats(props.currentSeats - 1). We removed this as our objective is not to have references to seats in this component. We will set this up in the EnrolList component.

In the previous version of this function, available seats were set by props.setUpdatedSeats(props.currentSeats - 1). As we want to do this from within the EnrolList component, I deleted this line.

Internet suggest to use dart sass instead
npm -i sass

For the program radio buttons, the location of the onChange handler is causing a warning in the console.

When it's on the <li> holding the radio buttons, the warning raised is this:

You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

To make the error go away with where we are in the book, move the handler to the inputs:

          <li className="parentLabels">
            <input
              type="radio"
              value="UG"
              name="programGroup"
              checked={isUGChecked}
              onChange={handleChange}
            />
            Undergraduate
            <input
              type="radio"
              className="radioSel"
              value="PG"
              name="programGroup"
              checked={!isUGChecked}
              onChange={handleChange}
            />
            Postgraduate
          </li>

In Chapter 2, in the "Conditionals and Loops" section...

The first code sample sets the variable isNormalTravelResumed:
let isNormalTravelResumed = false;

but the variable in the if statement drops the "Normal":
if(isTravelResumed === true)

In your markup, you are using <label for="firstName"></label>. That is causing an error in the console since in JSX "for" is a keyword. The correct markup would be <label htmlFor="firstName"></label>