<input
    placeholder="eth"
    value={eth}
    onChange={(e) => {
      let eth_input = e.target.value;
      console.log(eth_input);
      setEth(eth_input)
      setToken(eth_input * rate);
    }}
  />
  <input
    placeholder="token"
    value={token}
    onChange={(e) => {
      let token_input = e.target.value;
      console.log(token_input);
      setToken(token_input)
      setEth(token_input / rate);
    }}
  />

The problem with your code is that your two inputs are both, at least to start with, uncontrolled inputs. And when I run your original codesandbox, there is a console message warning about this, when you edit either of the fields.

This comes about because although your inputs were taking their value from state, their change handlers were not updating that same state with the input value. You were updating the state of the other input, but not those themselves.

Adding the two highlighted lines below, one in each event handler, fixes this, and as far as I can tell makes things function as you intended:

import "./styles.css";
import React from "react";

export default function App() {
  const rate = 100;
  const [token, setToken] = React.useState();
  const [eth, setEth] = React.useState();

  console.log("token", token);
  console.log("eth", eth);

  return (
    <div className="App">
      <h1>1 eth = 100 token</h1>
      <h2>goal: change one input, the other updates automatically</h2>
      <input
        placeholder="eth"
        value={eth}
        onChange={(e) => {
          let eth_input = e.target.value;
          console.log(eth_input);
          setEth(eth_input); // <-- add this
          setToken(eth_input * rate);
        }}
      />
      <input
        placeholder="token"
        value={token}
        onChange={(e) => {
          let token_input = e.target.value;
          console.log(token_input);
          setToken(token_input); // <-- and this
          setEth(token_input / rate);
        }}
      />
    </div>
  ):
}