SANITY : How to implement query and params?

Question

I did this query in vision and finally got what I needed but is this the correct way to implement Sanity's query & params on react ?

import { useState, useEffect } from "react"
import client from "../client"


export default function Homepage() {
  const [posts, setPosts] = useState([])
  
    useEffect(() => {
        client.fetch(
            `
            *[_type == "post" && $keyword in categories[]->title] {
                ...,
                categories[] -> {
                        title,
                        slug
                },
              },
                `,{"keyword":"AQIDAH"}
        ).then((data) => setPosts(data)).catch(console.error)
    }, [])

    return (
        <div>
            {posts.map((post) => (
                <ul>
                    <li>{posts.title}</li>
                </ul>
                ))}
        </div>
        )
}

It gave me below errors in Chrome console :

ClientError {response: {…}, statusCode: 400, responseBody: '{\n  "error": {\n    "description": "unable to parse…"start": 218,\n    "type": "queryParseError"\n  }\n}', details: {…}, message: 'unable to parse entire expression', …}details: {description: 'unable to parse entire expression', end: 218, query: '\n            *[_type == "post" && $keyword in cate…             },\n              },\n                ', start: 218, type: 'queryParseError'}