React js using Toastify does not display if there is more than 1 condition, but Alert will work fine

Question

I am trying to add points to the result if a question is answered correctly and take away 10 points if the user answers the wrong question.

I am also wanting to display a toast message that let's the user know if their selection was right or wrong. Here is the conditonal that is not displaying the toast messages.

import * as React from "react";
import { styled } from "@mui/material/styles";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export default function GridUI({ options, correctAnswer, result, setResult }) {
  const handleOptions = () => {
    if (correctAnswer === options) {
      setResult(result + 10);
      toast.success("Correct!", {
        autoClose: 2000,
      });
    } else if (correctAnswer !== options) {
      setResult(result - 10);
      toast.error("Wrong, my Lord.", {
        autoClose: 2000,
      });
    }
  };

  return (
    <>
      <Box sx={{ width: "100%" }}>
        <Grid container spacing={2}>
          <Grid item xs={12} style={{ margin: 10 }}>
            <ToastContainer />
            <Item onClick={() => handleOptions()}>{options}</Item>
          </Grid>
        </Grid>
      </Box>
    </>
  );
}

If I take out the setResult(result +/- 10), then the toastify message will display just fine. But if I add this condition as well, it will not display anything or give an error message and the score will increase or decrease fine.

I tried to make the toastify it's own function to display when it meets the conditions, but that does not work either. I replace toast.success with alert and that works, but looks bad on the UI. Please help if anyone knows the error! Thank you!