Getting error on axios post call success and error in React Testing

So Im new to react and want to check my code , my code is working fine but fails in testing need help

I want the data entered my user in the form to post to json-server using axios my code is posting data to the server but it fails in testing

where to update in my code

Testing File

describe("Testing Booking component post http call", () => {
  const server = setupServer(
    rest.post("http://localhost:4000/bookings", (req, res, ctx) => {
      return res(
        ctx.json({
          bookedOn: "2022-03-25",
          buffetName: "SouthIndianFestivalSpecial",
          emailId: "kavya@gmail.com",
          id: 1018,
          plateCount: "2",
        })
      );
    })
  );

  beforeAll(() => server.listen());
  afterEach(() => server.resetHandlers());
  afterAll(() => server.close());
  it("Testing axios post call success", async () => {
    render(<BookingComponent />);
    let buffetName = screen.getByTestId("buffetName");
    fireEvent.change(buffetName, {
      target: { value: "SouthIndianFestivalSpecial" },
    });
    let email = screen.getByTestId("emailId");
    fireEvent.change(email, { target: { value: "kavya@gmail.com" } });
    let plateCount = screen.getByTestId("plateCount");
    fireEvent.change(plateCount, { target: { value: 2 } });
    let bookedOnDate = screen.getByTestId("bookedOn");
    fireEvent.change(bookedOnDate, { target: { value: "2022-03-25" } });

    let form = screen.getByTestId("buffet-form");
    fireEvent.submit(form);
    let successMessage = await screen.findByTestId("success");
    expect(successMessage.innerHTML).toContain(`1018`);
  });
  it("Testing axios post call error", async () => {
    server.use(
      rest.post("http://localhost:4000/bookings", (req, res, ctx) => {
        return res(ctx.status(500));
      })
    );

    render(<BookingComponent />);
    let buffetName = screen.getByTestId("buffetName");
    fireEvent.change(buffetName, {
      target: { value: "SouthIndianFestivalSpecial" },
    });
    let email = screen.getByTestId("emailId");
    fireEvent.change(email, { target: { value: "kavya@gmail.com" } });
    let plateCount = screen.getByTestId("plateCount");
    fireEvent.change(plateCount, { target: { value: 2 } });
    let bookedOnDate = screen.getByTestId("bookedOn");
    fireEvent.change(bookedOnDate, { target: { value: "2022-03-25" } });

    let form = screen.getByTestId("buffet-form");
    fireEvent.submit(form);
    let errorMessage = await screen.findByTestId("error");
    expect(errorMessage.innerHTML).toContain("Something went wrong");
  });
});

This is my jsx file where i gather data on onChange in form when submit button clicked it goes to handleSubmit function given below the function check input values and post the data to josn-server using axios

    console.log("buffet button clicked");
    // 1. This method will be invoked when user clicks on 'Book Buffet' button.
    // 2. You should prevent page reload on submit
    // 3. check whether all the form fields are entered. If any of the form fields is not entered set the mandatory state variable to true.
    // 4.  If all the form fields values are entered then make axios call to
    // "http://localhost:4000/bookings/" and pass the appropriate state as data to the axios call
    // 5. If the axios call is successful, assign the below string to successMessage state:
    //   "Booking is successfully created with bookingId: " + <id>
    // 6. If the axios call is not successful, assign the error message to "Something went wrong"
    e.preventDefault();
    let allfiesds =
      formErrors.emailIdError &&
      formErrors.bookedOnError &&
      formErrors.buffetNameError &&
      formErrors.plateCountError;
    setMandatory(allfiesds ? true : false);
    // working but not qualifying in testing
    if (valid) {
      axios
        .post(url, state)
        .then((res) => {
          console.log(res.data);
          setSuccessMessage(
            "Booking is successfully created with bookingId: " + res.data.id
          );
          setErrorMessage("");
          console.log(res.data.id);
        })
        .catch((error) => {
          if (error.response) {
            console.log(error.response.data.message);
          }
          setErrorMessage(messages.ERROR);
          setSuccessMessage("");
          console.log();
        });
    }
  };

this is error im getting in testing

 Testing Booking component post http call › Testing axios post call success

    expect(received).toContain(expected) // indexOf

    Expected substring: "1018"
    Received string:    ""

      203 |     fireEvent.submit(form);
      204 |     let successMessage = await screen.findByTestId("success");
    > 205 |     expect(successMessage.innerHTML).toContain(`1018`);
          |                                      ^
      206 |   });
      207 |   it("Testing axios post call error", async () => {
      208 |     server.use(

      at Object.<anonymous> (src/App.test.js:205:38)

  ● Testing Booking component post http call › Testing axios post call error

    expect(received).toContain(expected) // indexOf

    Expected substring: "Something went wrong"
    Received string:    ""

      227 |     fireEvent.submit(form);
      228 |     let errorMessage = await screen.findByTestId("error");
    > 229 |     expect(errorMessage.innerHTML).toContain("Something went wrong");
          |                                    ^
      230 |   });
      231 | });
      232 |

      at Object.<anonymous> (src/App.test.js:229:36)