Accessing React component state from MDX

Question

Assume that I have the following files.

import React, { useState } from 'react';
import someComputation from './someComputation';

type ComponentType = {
  input: number;
};

const Component = (props: ComponentType) => {
  const [state, setState] = useState(someComputation(props.input));
  console.log(state.color); // "#440000" for example

  return <>...some component UI</>;
};

export default Component;

import Component from "./Component"

# Title

## Header

Body text like this

<Component input={5} />

I want to refer to the {state.color} of the component above. How?

I think one way could be update the global or a context with the value of state and then create another component that just fetch the context value.
Is there a better (easier) way to achieve this?