How to apply filter on sent items in Graph API

This is my code file where I am trying to add filters on inbox and sent items using Microsoft graph API:

const GraphApiTest = ({ email }) => {
  const emailsPerPage = 5;
  const [inboxPage, setInboxPage] = useState(1);
  const [sentPage, setSentPage] = useState(1);
  const [inboxEmails, setInboxEmails] = useState([]);
  const [selectedEmail, setSelectedEmail] = useState(null);
  const [sentEmails, setSentEmails] = useState([]);
  const [loading, setLoading] = useState("");
  const [emailsData, setEmailsData] = useState({});
  const msalInstance = new PublicClientApplication(msalConfig);
  const users = [
    "user1@example.onmicrosoft.com",
    "user2@example.onmicrosoft.com",
    "user3@example.onmicrosoft.com",
  ]; // Add the user emails here
  useEffect(() => {
    if (email) {
      loginAndFetchEmails();
    }
  }, [email]);
  const loginAndFetchEmails = async () => {
    try {
      await msalInstance.initialize();
      const accounts = msalInstance.getAllAccounts();
      if (accounts.length === 0) {
        await msalInstance.loginPopup({
          scopes: ["Mail.Read", "Mail.Send", "User.Read"],
        });
      }
      const account = msalInstance.getAllAccounts()[0];
      let tokenResponse;
      try {
        tokenResponse = await msalInstance.acquireTokenSilent({
          account,
          scopes: ["Mail.Read", "Mail.Send", "User.Read"],
        });
      } catch (silentError) {
        console.warn("Silent token acquisition failed, fallback to popup.");
        tokenResponse = await msalInstance.acquireTokenPopup({
          account,
          scopes: ["Mail.Read", "Mail.Send", "User.Read"],
        });
      }
      const accessToken = tokenResponse.accessToken;
      setLoading(true);
      // Fetch received emails (Inbox)
      const fetchedEmails = {};
      for (const user of users) {
        const inboxResponse = await axios.get(
         `https://graph.microsoft.com/v1.0/users/${user}/mailFolders('inbox')/messages?$filter=from/emailAddress/address eq '${email}'`,
        {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        }
        );
      // Fetch sent emails
      const sentResponse = await axios.get(
        `https://graph.microsoft.com/v1.0/users/${user}/mailFolders('sentitems')/messages`,
        {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        }
      );
      fetchedEmails[user] = {
        inbox: inboxResponse.data.value,
        sent: sentResponse.data.value,
      };
    }
    // Update state with emails for all users
    setEmailsData(fetchedEmails);
    } catch (error) {
      console.error("Error during login or fetching emails:", error);
    } finally{
      setLoading(false);
    }
  };
  const paginateEmails = (emails, page) => {
    const start = (page - 1) * emailsPerPage;
    const end = start + emailsPerPage;
    return emails.slice(start, end);
  };
  const inboxEmailsPaginated = paginateEmails(inboxEmails, inboxPage);
  const sentEmailsPaginated = paginateEmails(sentEmails, sentPage);
  const totalInboxPages = Math.ceil(inboxEmails.length / emailsPerPage);
  const totalSentPages = Math.ceil(sentEmails.length / emailsPerPage);
  const openModal = (email) => {
    setSelectedEmail(email);
  };
  const closeModal = () => {
    setSelectedEmail(null);
  };
  
export default GraphApiTest;

In this code when I am adding filter on inbox folders its working fine and giving me the filtered emails from that email address but for sent items when I try this:

const sentResponse = await axios.get(
  `https://graph.microsoft.com/v1.0/users/${user}/mailFolders/sentitems/messages?$filter=toRecipients/any(t:t/emailAddress/address eq '${email}')`,
  {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  }
);

It gives the error 400 and says invalid uri. How can I add a filter on sent items folder too? I have tried many ways but whenever I add a filter on sent items it always gives error while for inbox it works fine. Here is the error message:

and this error on console:

response
:
"{"error":{"code":"BadRequest","message":"There is an unterminated string literal at position 34 in '\"recipients:example@gmail.com'.","innerError":{"date":"2024-12-09T06:49:41","request-id":"61e6203d-db9f-4948-85e8-d41ddf5db99a","client-request-id":"61e6203d-db9f-4948-85e8-d41ddf5db99a"}}}" responseText : "{"error":{"code":"BadRequest","message":"There is an unterminated string literal at position 34 in '\"recipients:example@gmail.com'.","innerError":{"date":"2024-12-09T06:49:41",

The toRecipients property doesn't support filtering, but you can use $search query parameter and search for messages by recipients

const sentResponse = await axios.get(
  `https://graph.microsoft.com/v1.0/users/${user}/mailFolders/sentitems/messages?$search="recipients:${email}"`,
  {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  }
);