How to properly set the type for property `d` in `path` element in a d3 react typescript application

I’m trying to draw a triangle using the d3 symbol() method and assigned it to a variable symbolTri.

import { symbol, symbolTriangle } from "d3"
const symbolTri = symbol().size(100).type(symbolTriangle)

export const Component = () => {
    // ...
    return (
        <g>
            <path d={symbolTri()} />
        </g>
    )
}

But while setting the d property a typescript error Type 'string | null' is not assignable to type 'string | undefined'. occurred. And while hovering over the error it shows 'd' value should be of type d?: string | undefined;. But I’m unable to set it properly. Any help, or suggestion would be really helpful.

>Solution :

The easiest solution, assuming that the output of symbolTri() cannot be null (which seems a reasonable assumption in this case), is to use the non-null assertion operator, which effectively tells the TypeScript compiler that this variable will never be null:

<path d={symbolTri()!} />