Like this:

function Component() {
  const style = { "--my-css-var": 10 } as React.CSSProperties;
  return <div style={style}>...</div>
}

Or without the extra style variable:

function Component() {
  return <div style={{ "--my-css-var": 10 } as React.CSSProperties} />
}

I think you should set your inline style as below, keeping the key: value form.

import React from "react";
import "./index.scss"

const GridItem = ({ icon }) => {
  return (
  <div style={{'--color': `${icon.color}`}} className="flex-item">
    <img src={icon.img} alt="" />
  </div>
  );
};

export default GridItem;

React is a UI framework, not an application framework. So the simplest thing to do is to wire the ability to change the color into your UI framework by adding some code to your application.

import React from 'react';
import { createRoot } from 'react-dom/client';
// Or use import { render } from 'react-dom'; if you're not on React 18

// Your _application_ logic can do things with the DOM directly
const changeThemeData = (newTheme) => {
  document.body.style.setProperty('--color', newTheme.color);
};

const uiRoot = createRoot(document.getElementById("your-mount-point"));
uiRoot.render(
  <YourApp onThemeChange={changeThemeData} />
)

But if you want to avoid manipulating the DOM at all (because you want to manipulate the DOM for UI reasons and you want to keep all of your UI logic in your UI framework, for example), then the right thing to do is to move your styling from body to yourMainElement:

/* Your CSS File.css */
#the-main-element {
  --color: red;
  /* etc. */
}

function YourApp() {
  const styles = isMonday() ? {"--color": "blue"} : undefined;
  return <div id="the-main-element" style={styles}>Well, well, well</div>
}